Access multiple items with same name in DOM

Question

Using the web developer console I can access the content of the first item of particular class like this from the web console:

$(".license-box pre").text();

However, what if there is more than one object with the name "pre" which are members of the class "license-box"? How do I access instance 1, 2, n etc?

I am NOT asking how to iterate through a list of class members. I am asking how to access the Nth member of the list, which is a different question. This is not a duplicate of the marked post. It is a duplicate of the post Felix King linked below, so it should be retagged correctly to point to Felix's item.

Solution as posted below: use the .eq() method.

What is `$`? jQuery? You may want to read through a beginner's tutorial. — , May 16 '15 at 14:38
@Pointy: Should I offer him my congratulations? Or should I take his 5k rep to mean he should know that he ought to do basic research first? — , May 16 '15 at 14:40
What LOL, yeah maybe OP is really good with other languages, but yeah this is pretty basic. — Michelangelo, May 16 '15 at 14:42
@squint ha no I just meant that the OP has had plenty of time to absorb the ways of SO already. Agreed that this is a question whose answers are sitting right there in the jQuery API docs (assuming that `$` is jQuery, which is a safe bet but still a bet). — Pointy, May 16 '15 at 14:45
Yeah, since someone else decided it was jQuery and added the tag, I figured I'd go ahead and grab one of the dupes. — , May 16 '15 at 14:47
OP: By the way you are not accessing only one when using `$(".license-box pre").text();`. You are basically doing `document.getElementsByClassName` returning a Nodelist object. You can iterate over them like in plain javascript. — Michelangelo, May 16 '15 at 14:53

Pointy · Accepted Answer · 2015-05-16T14:43:44.927

2

You can iterate through the collection of items with .each():

$(".license-box pre").each(function() {
  console.log("this <pre> contains: " + $(this).text());
});

The callback to .each() is passed the index, which would let you do something like act only on the even-indexed elements:

$(".license-box pre").each(function(index) {
  if ((index & 1) === 0)
    console.log("even <pre>: " + $(this).text());
});

If you know which one you want, you can use .eq():

var third = $(".license-box pre").eq(3);

You can do a lot of stuff right in the selector itself. If you want to do something to every 3rd <pre> you could do this:

$(".license-box pre:nth-child(3n)").each(function() {
  console.log($(this).text());
});

(The nth-child() selector here would make sense when the <pre> elements are the direct children of the "license-box" container, because the semantics have to do with each element's sibling relationships.)

edited May 16 '15 at 14:43

answered May 16 '15 at 14:36

Pointy

405,095
59
585
614

The .eq method is what I needed: $(".license-box pre").eq(1).text(); – Tyler Durden May 16 '15 at 14:44
@TylerDurden you can also do `$(".license-box pre:eq(1)").text()` – Pointy May 16 '15 at 14:46
Using `.eq(1)` avoids the skank of non-standard selectors. – six fingered man May 16 '15 at 14:52
@sixfingeredman yes that's certainly true – Pointy May 16 '15 at 16:19

score -1 · Answer 2 · answered May 16 '15 at 14:36

-1

Like this? .each

var res = [];

$(".license-box pre").each(function(){
    res.push($(this).text()); // or alert($(this).text());
});

console.log(res);

Now, if you want text of nth instance, simply do:

alert(res[n - 1]);

answered May 16 '15 at 14:36

Gaurang Tandon

6,504
11
47
84

Access multiple items with same name in DOM

2 Answers2