Question

Assuming the following selector

$("div span:first-child")

applied in following html code

John,
Karl,
Brandon

   </div>
   <div>
    <span>Glen,</span>
    <span>Tane,</span>
    <span>Ralph</span>
  </div>   

as seen on jquery doc

is there a way to reference “each” element returned?

I can’t seem to be able to iterate through them using .each() (.size() returns 0)

Update: you are right there is something different which I missed for some reason but didn’t occur to me that this might be an issue while reading the documentation.

So it seems that first-child selector returns only if the element is actually the first child and not just the first occurrence.

e.g.

   <div>
    <h1>Names</h1>
    <span>John,</span>
    <span>Karl,</span>
    <span>Brandon</span>    
   </div>
   <div>
    <span>Glen,</span>
    <span>Tane,</span>
    <span>Ralph</span>
  </div> 

will return only the span from the 2nd div.

Is that a “feature”? Is there an alternative way to select the first child? (based on occurrence)

Answer 1

Updated for new question: This finds the first span in each <div>, regardless if it’s actually the first child.

$("div").find("span:first").each(function() {
    alert("This is child #" + $(this).index() + " in this section: " + $(this).text());
});​

You can see a demo here.

---

You can use .each() to do what you want, like this:

$("div span:first-child")​.each(function() {
  alert("This is child #" + $(this).index() + " in this section: " + $(this).text());
});​

You can test it out here.

For this:

I can’t seem to be able to iterate through them using .each() (.size() returns 0)

There must be something outside the code you posted, running on that markup does work, as you can see in my demo. You need to see what’s different about your actual markup that…that difference is likely what’s causing the issue.