Question

I have some nested elements as such:

<div id="knownID">
 <div class="knownClass">
   <span>
     <nobr>
       <span class="knownClass2">
         <span> ... </span>       <--- this keeps expanding deeper and deeper
         <span></span>            <--- this is the one I need!!!
       </span>
     </nobr>
   </span>
 </div>
</div>

I’m trying to select this by doing…

$('#knownID span.knownClass2 span:nth-child(2)').html();

… but its not working out. How can I select that 2nd <span> inside the <span> with class="knownClass2"? I’ve also tried…

$('#knownID > span.knownClass2 span:nth-child(2)').html();

… but it is returning null. I guess I’m not very familiar with how the nth-child() selector works in jQuery. Would someone mind explaining how it works as well as provide a possible solution to my problem?

Thanks,
Hristo

Answer 1

You might want to try:

$("#knownID span.knownClass2 > span:nth-child(2)").html();

This reads: Find the 2nd child of type span directly under a span whose class is “knownClass2” that is nested somewhere inside an element whose id is “knownId”.

The documentation can be found here:

http://api.jquery.com/category/selectors/

PS: Here is a context based solution as well:

$(" > span:eq(1)", "span.knownClass2", "div#knownID").html();