So finden die Kinder eines Elements in jQuery

HTML‑Elemente enthalten einen Teil einer Webseite, wie Überschriften, Tabellen, Bilder und Absätze. Wenn Sie HTML-Tags innerhalb einander Schachteln, erstellen Sie über- und untergeordneten Elemente. Das oberste Element ist das übergeordnete Element, während alle geschachtelte Elementen der Kinder geworden. In jQuery kann man die Kinder eines Elements mit der Funktion "children()", aber Sie brauchen eine Schleife über das Array von Werten, die Funktion erstellt.

Anweisungen

1 Überprüfen Sie, ob Ihr Code einen Verweis auf die jQuery-Bibliothek, enthält bevor Sie versuchen, das Skript in jQuery. Fügen Sie diesen Code innerhalb der "< Head >" Tags Ihrer Web-Seite, wenn den Verweis nicht angezeigt wird:

< Script-Element. Hängen Sie die Auswahl mit der Funktion "children()" um die Kinder zu erhalten:

$('ul.level-2').children();

Im obige Beispiel wird eine ungeordnete Liste auswählen, die einen Klassennamen der "Stufe 2" gegeben ist Jedoch, wenn "children()" mehrere untergeordnete Elemente findet, erstellt er einen Array von Werten. Sie benötigen speziellen Code um ein Array zu verarbeiten.

4 Fügen Sie "children()" mit "each()" durch das Array der untergeordneten Elemente zu durchlaufen. Da es sich um eine Schleifenstruktur, Sie brauchen eine Zählervariable, aber Sie müssen nicht es vorher in jQuery erstellt. Übergeben Sie "i" als Argument in "each()" Ihren Counter zu bekommen:

$('ul.level-2').children () .each (Funktion (i) {}

});

5 Deklarieren Sie eine Variable, die den Textwert des jedes untergeordnete Element halten wird. Sie können andere Werte von Elementen erhalten wird, doch Text jeglicher Text innerhalb der Kinder gefunden und eignet sich für Daten greifen. Setzen Sie die Variable "$ (dies)", das aktuelle Element zu erhalten, dem die Funktion "each()" arbeitet. Hängen Sie "$(dies)" mit "text()" zum Abrufen des Textes:

Var ChildEl = $(this).text();

6 Die Ausgabewerte auf Ihre Seite durch ein Element auswählen und "append()" Anhängen, so dass die Funktion "each()" Werte hinzufügen halten kann, wie er sie findet:

$('div').append (ich + ":" + ChildEl + "");

In diesem Beispiel wird "ChildEl" auf eine Reihe von "< Div >" Tags ausgegeben. Jedes Mal, wenn jQuery den Code in "each() wiederholt" Es gibt die Anzahl von "Ich", fügt ein paar Semikolons, gibt den Wert des "ChildEl" und endet die Linie mit einem Tag Pause-Linie.

7 Ihre fertige Skript sieht folgendermaßen aus:

{$(function()}

$('ul.level-2').children () .each (Funktion (i) {}

var childEl = $(this).html();

$('div').append(i + " : " + childEl + "");

});

});

Tipps & Warnungen

• Fügen Sie "console.log(childEl);" innerhalb der Funktion "each()" in der letzten Zeile. Verwenden Sie Firebug Firefox oder der JavaScript-Konsole in Google Chrome, um die Werte in einer Konsole zu überprüfen, beim Debuggen.
• Ersetzen Sie "text()" durch "html()", den HTML-Code für die untergeordneten Elemente zu erhalten.