JQuery each loop problem

Question

Hello,

I have the following code

  <div>
 <a href="#" class="clickMe">test</a>
 <ul>
     <li class="action_li">1</li>
     <li class="action_li">2</li>
 </ul></div> <div>
 <a href="#" class="clickMe">test</a>
 <ul>
     <li class="action_li">3</li>
     <li class="action_li">4</li>
 </ul>

and I want to loop on all the <li> that are enclosed with the same <div> as the clicked <a>

$("a.clickMe").live("click", function(eve){
   eve.preventDefault();
   $('.action_li').each(function(index) {
      console.debug(this);
   }); 
});

but of course this will get me all the 4 <li> not the two enclosed so I want to have something that starts with $(this) and ends with .each()

Answer 1

You need to get the <ul> element that is a sibling of the <a>, then get its children.

For example:

$(this).siblings('ul').children('li.action_li').each(function(index) {
    //...
});

You could also call $(this).next() or $(this).nextAll('ul').

Answer 2

There are many ways, examples:

   $(this).parent().find("li.action_li").each(function(index) {
      console.debug(this);
   }); 

or:

   $(this).next("ul").children("li.action_li").each(function(index) {
      console.debug(this);
   });

etc.

Answer 3

$("a.clickMe").live("click", function(eve){
   eve.preventDefault();
   $(this).siblings('ul').children('li').each(function(index) {
      console.debug(this);
   }); 
});

Answer 4

This should work:

$("a.clickMe").live("click", function(eve){
   eve.preventDefault();
   $('.action_li', $(this).parent()).each(function(index) {
      console.debug(this);
   }); 
});

Second parameter next to the selector will limit the search to only part of the DOM tree, in this part to the one div which is parent for a element.

Answer 5

This might work:

$(this).parents('div').find('li').each(...