jQuery loop though two levels of elements

Question

I have some html that looks like this:

<div class="block">
    <div id="item1"></div>
    <div id="item2"></div>
</div>

<div class="block">
    <div id="item3"></div>
</div>

I'm trying to check to see if my div will contain a specific element. I need to loop though each block, then get each item.

What I've got so far

    $('.block:has(div)').each(function() {
         // do something with the block
    });

Which is great, because it will return all the blocks that have items in them. But I need something along the lines of

    $('.block:has(div)').each(function() {
             $('current place in loop' + li).each(function() {
                  // do something with each item element, before the block loop has finished
             });
    });

Any ideas?

Answer 1

I hope you mean this:

$('.block').each(function(){
    $(this).find('div').each(function(){
        //do your stuff
    });
});

Answer 2

I'm not 100% sure if this answers what you are asking, but wouldn't the following work:

$('.block:has(div)').each(function() {
  $(this).children('div').each(function() {
    // do something with each item element, before the block loop has finished
  });
});

Answer 3

Did you tried using

$("#" + this)

? It's used in the main each example of jquery documentation (harshath has already posted... too slow, sob) (can't submit the link to the documentation, not enough rep)

Answer 4

I would build the selector within the nested each, or use find:

 $('.block:has(div)').each(function() {
     $('#' + this.id +  ' li').each(function() {
         //do stuff on list item            
     });
 });

OR

 $('.block:has(div)').each(function() {
     $(this).find('li').each(function() {
         //do stuff on list item            
     });
 });