JQuery task for each loop

Question

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 the loop on all <li>that were concluded with the same <div>, as a click<a>

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

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

Answer 1

This should work:

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

The second parameter next to the selector will limit the search to only part of the DOM tree, in this part there will be divwhich is the parent of the element a.

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);
   });

and etc.

Answer 3

<ul>, <a>, .

:

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

$(this).next() $(this).nextAll('ul').

Answer 4

:

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