54

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?
    });
});
2
  • 2
    You want to target li children's ? Commented May 2, 2013 at 19:31
  • You want to iterate over <li>s that are inside <li>s?
    – acdcjunior
    Commented May 2, 2013 at 19:32

5 Answers 5

90
$('li').each(function(){
    var $this = $(this);
    $this.children("li").each(function(){
        $this; // parent li
        this; // child li
    });
});
1
  • @mmmoustache - np glad i could help
    – Gabe
    Commented May 2, 2013 at 20:36
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>

4
  • 1
    Why are you using this, then? $(this).cildren('li') as opposed to li.children('li') Commented May 2, 2013 at 19:37
  • 1
    @EliasVanOotegem: 'twas a copy/paste omission. Thanks for the heads-up.
    – user1106925
    Commented May 2, 2013 at 19:38
  • thanks for this, squint. I never quite got function parameters until your example! Commented May 2, 2013 at 20:01
  • 1
    This answer should be part of JQuery/SO lore! I didn't even know about the parameters.
    – dotnetN00b
    Commented Oct 21, 2014 at 21:42
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
    });
});
2
  • thanks for the explanation - the documentation is a bit daunting at times but you helped me out! Commented May 2, 2013 at 20:02
  • This answer is very educational as well.
    – dotnetN00b
    Commented Oct 21, 2014 at 21:44
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.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.