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?
});
});
$('li').each(function(){
var $this = $(this);
$this.children("li").each(function(){
$this; // parent li
this; // child li
});
});
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>
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
});
});
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.
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);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With