Targeting $(this) within nested for each loops in jQuery

Question

I'm trying to figure out, when iterating through some list items, how to target each "$(this)" equivalent within nested foreach loops. Here is an example of my problem:

$('li').each(function(){
        // I believe $(this) would target each li item...
    $(this).children("li").each(function(){
        // ... but how can I target each of these li items? Doesn't $(this) target the original loop?
    });
});

You want to target li children's ?

Adil Shaikh
– Adil Shaikh

2013-05-02 19:31:30 +00:00
Commented May 2, 2013 at 19:31 — Adil Shaikh
– Adil Shaikh, Commented May 2, 2013 at 19:31
You want to iterate over <li>s that are inside <li>s?

acdcjunior
– acdcjunior

2013-05-02 19:32:44 +00:00
Commented May 2, 2013 at 19:32 — acdcjunior
– acdcjunior, Commented May 2, 2013 at 19:32

Gabe · Accepted Answer · 2013-05-02 19:31:23Z

90

$('li').each(function(){
    var $this = $(this);
    $this.children("li").each(function(){
        $this; // parent li
        this; // child li
    });
});

answered May 2, 2013 at 19:31

Gabe

50.6k29 gold badges147 silver badges182 bronze badges

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

1 Comment

Gabe Over a year ago

@mmmoustache - np glad i could help

user1106925 · Accepted Answer · 2013-05-02 19:36:46Z

34

Don't use this! Use function parameters!

$('li').each(function(i, li){
    $(li).children("li").each(function(ii, li2){
        $(li)...
        $(li2)...
    });
});

This is more in keeping with the native JavaScript iterators.

...though an <li> can't be the direct child of another <li>

answered May 2, 2013 at 19:36

community wiki

user1106925

4 Comments

Elias Van Ootegem Over a year ago

Why are you using this, then? $(this).cildren('li') as opposed to li.children('li')

user1106925 Over a year ago

@EliasVanOotegem: 'twas a copy/paste omission. Thanks for the heads-up.

mmmoustache Over a year ago

thanks for this, squint. I never quite got function parameters until your example!

dotnetN00b Over a year ago

This answer should be part of JQuery/SO lore! I didn't even know about the parameters.

Elias Van Ootegem · Accepted Answer · 2013-05-02 19:35:44Z

12

Look at the basic "prototypes" of jQuery functions (or methods, if you will):

$[jQobject].[func]([callback]);

The callback is the function that will be invoked in the context of the jQ object. The context being this, obviously. Put simply that means that:

$('#foo').click(function(){});
   /\                 /\
   || Is the context  ||
   =====================

The same applies to your case, regardless of the loops being nested or not:

$('ul').each(function()
{
    //this is ul
    var that = this;//you'll often see code like this
    $('li', this).each(function()
    {
        //this is li
        //that is parent ul
    });
});

answered May 2, 2013 at 19:35

Elias Van Ootegem

76.7k10 gold badges123 silver badges160 bronze badges

2 Comments

mmmoustache Over a year ago

thanks for the explanation - the documentation is a bit daunting at times but you helped me out!

dotnetN00b Over a year ago

This answer is very educational as well.

SLaks · Accepted Answer · 2013-05-02 19:30:01Z

3

but how can I target each of these li items? Doesn't $(this) target the original loop?

Nope.

this comes from the function you're directly in.

answered May 2, 2013 at 19:30

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Comments

Blender · Accepted Answer · 2013-05-02 19:30:08Z

2

Nope, this refers to each of the child <li> items. Try it out.

Most (if not all) DOM-interacting jQuery callbacks set this to to the DOM element that you're working with.

You could also write:

$('li').children("li").each(function(){
    var $this = $(this);
});

answered May 2, 2013 at 19:30

Blender

300k55 gold badges462 silver badges511 bronze badges

Collectives™ on Stack Overflow

Targeting $(this) within nested for each loops in jQuery

5 Answers 5

1 Comment

4 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

4 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related