JQuery each loop problem

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 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()

I want to have something that starts with $(this) and ends with .each(). Is there a particular reason for this constraint (seems kind of arbitrary)? — Roman
– Roman, Commented Jun 2, 2010 at 16:06

karim79 · Accepted Answer · 2010-06-02 15:38:31Z

5

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.

answered Jun 2, 2010 at 15:38

karim79

343k67 gold badges420 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

David Waters Over a year ago

+1, see jsfiddle.net/buMsx for the top one working. I'm not quick enough on the draw :)

bhefny Over a year ago

it wouldn't work for sure as each() can't work after find(). find by itself would return one element only

karim79 Over a year ago

@bhefny - sorry, but that's not correct. find will return as many elements as are matched by the passed selector.

RaYell · Accepted Answer · 2010-06-02 15:39:36Z

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.

answered Jun 2, 2010 at 15:39

RaYell

70.6k20 gold badges127 silver badges154 bronze badges

Comments

SLaks · Accepted Answer · 2010-06-02 15:38:19Z

3

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').

answered Jun 2, 2010 at 15:38

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

2 Comments

ricecake5 Over a year ago

I think you can just use '.action_li' instead of 'li.action_li' or just plain 'li'... it's faster for jquery's selector engine

SLaks Over a year ago

@ricecake5: Yes, you can. However, there might be other <li>'s.

David Waters · Accepted Answer · 2010-06-02 15:51:54Z

0

This might work:

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

edited Jun 2, 2010 at 15:51

David Waters

12k7 gold badges44 silver badges77 bronze badges

answered Jun 2, 2010 at 15:39

Jeremy

46.8k72 gold badges219 silver badges359 bronze badges

Collectives™ on Stack Overflow

JQuery each loop problem

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related