it-swarm.com.de

Targeting von $ (this) innerhalb von verschachtelten Schleifen in jQuery

Ich versuche, beim Durchlaufen einiger Listenelemente herauszufinden, wie jedes "$ (this)" - Äquivalent in verschachtelten foreach-Schleifen ausgewählt werden kann. Hier ist ein Beispiel für mein 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?
    });
});
41
mmmoustache
$('li').each(function(){
    var $this = $(this);
    $this.children("li").each(function(){
        $this; // parent li
        this; // child li
    });
});
74
Gabe

Verwenden Sie nicht this! Funktionsparameter verwenden!

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

Dies entspricht eher den nativen JavaScript-Iteratoren.

... obwohl ein <li> nicht das direkte Kind eines anderen <li> sein kann

29
user1106925

Schauen Sie sich die grundlegenden "Prototypen" von jQuery-Funktionen (oder Methoden, wenn Sie so wollen) an:

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

Der Callback ist die Funktion, die aufgerufen wird im Kontext des jQ-Objekts. Der Kontext ist natürlich this. Einfach ausgedrückt bedeutet das:

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

Gleiches gilt für Ihren Fall, unabhängig davon, ob die Schleifen verschachtelt sind oder nicht:

$('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
    });
});
10

aber wie kann ich jedes dieser Objekte als Ziel auswählen? Hat $ (this) nicht die ursprüngliche Schleife zum Ziel?

Nee.

this kommt von der Funktion, in der Sie direkt sind.

3
SLaks

Nein, this bezieht sich auf jedes der Kinder <li> Artikel. Versuch es.

Die meisten (wenn nicht alle) DOM-interagierenden jQuery-Rückrufe setzen this auf das DOM-Element, mit dem Sie arbeiten.

Sie könnten auch schreiben:

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