Question

My divs are nested like this.

<div id="top">
   <div class="child1">
      <div class="child-child">
         <div class="child-child-child">
         </div>
      </div>
   </div>   
   <div class="child2">
      <div class="child-child">
         <div class="child-child-child">
         </div>
      </div>
   </div>   
</div>

Right now I’m going from #top to .child-child-child by doing this.

$('#top').children('.child1')
         .children('.child-child')
         .children('.child-child-child');

Do I have to specify the full path like this? I want to omit the middle divs if there’s a syntax that would let me do that. But I probably still need to specify whether I want to go through .child1 or .child2.

Answer 1

You do need to specify which path to take, but you could make it a little shorter:

$('#top > .child1').find('.child-child-child');

This will give you the '.child-child-child' that is a descendant of .child1.

Or you could write it like this, using only selectors:

$('#top > .child1 .child-child-child');

Or this, using only traversal methods:

$('#top').children('child1').find('.child-child-child');