Heim > Web-Frontend > js-Tutorial > Zusammenfassung der Methoden von jQuery zum Abrufen von übergeordneten Elementen und übergeordneten Knoten_jquery

Zusammenfassung der Methoden von jQuery zum Abrufen von übergeordneten Elementen und übergeordneten Knoten_jquery

WBOY
Freigeben: 2016-05-16 15:05:32
Original
2589 Leute haben es durchsucht

Das Beispiel in diesem Artikel fasst die Methode von jQuery zum Abrufen von übergeordneten Elementen und übergeordneten Knoten zusammen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Es gibt viele Möglichkeiten, übergeordnete Elemente in jquery abzurufen, z. B. parent(), parent(), close(), die Ihnen dabei helfen können, übergeordnete Elemente oder Knoten zu finden:

Lassen Sie uns zunächst ein Beispiel geben,

<ul class="parent1">
<li><a href="#" id="item1">jquery获取父节点</a></li> 
<li><a href="#">jquery获取父元素</a></li> 
</ul>

Nach dem Login kopieren

Unser Ziel ist es, das ul-Element mit der Klasse parent1 über Note a mit der ID item1 abzurufen. Es gibt mehrere Methoden:

1. Elternteil([expr])

Ruft einen Satz von Elementen ab, der das eindeutige übergeordnete Element aller übereinstimmenden Elemente enthält.

Sie können mithilfe optionaler Ausdrücke filtern.

Der Code lautet wie folgt

$('#item1').parent().parent('.parent1');

Nach dem Login kopieren

2. :parent

Entspricht Elementen, die untergeordnete Elemente oder Text enthalten

Der Code lautet wie folgt

$('li:parent');

Nach dem Login kopieren

3. Eltern([expr])

Ruft einen Satz von Elementen ab, der die Vorgängerelemente aller übereinstimmenden Elemente enthält (mit Ausnahme des Stammelements). Kann durch einen optionalen Ausdruck gefiltert werden.

Der Code lautet wie folgt

$('#items').parents('.parent1');

Nach dem Login kopieren

4. am nächsten ([expr])

Closest prüft zunächst, ob das aktuelle Element übereinstimmt, und gibt bei Übereinstimmung direkt das Element selbst zurück. Wenn es keine Übereinstimmung gibt, suchen Sie Schicht für Schicht aufwärts nach dem übergeordneten Element, bis ein Element gefunden wird, das mit dem Selektor übereinstimmt. Wenn nichts gefunden wird, wird ein leeres jQuery-Objekt zurückgegeben.

Der Hauptunterschied zwischen engsten und Eltern ist:

① Ersteres beginnt mit dem Abgleich und der Suche ab dem aktuellen Element, und letzteres beginnt mit dem Abgleich und der Suche ab dem übergeordneten Element ② Ersteres sucht schrittweise nach oben, bis es ein passendes Element findet, und stoppt dann die Suche nach oben bis zum Stammelement, fügt diese Elemente dann in eine temporäre Sammlung ein und verwendet dann den angegebenen Selektorausdruck zum Filtern ③ Ersteres gibt 0 oder 1 Element zurück, und letzteres kann 0, 1 oder mehrere Elemente enthalten.

closest ist nützlich für die Abwicklung der Ereignisdelegierung.

$('#items1').closest('.parent1');

Nach dem Login kopieren
Leser, die an weiteren jQuery-bezogenen Inhalten interessiert sind, können sich die speziellen Themen auf dieser Website ansehen: „
JQuery-Traversalalgorithmus und Zusammenfassung der Fähigkeiten

“, „Zusammenfassung der jQuery-Tabellenoperationsfähigkeiten.“ ", "Zusammenfassung der jQuery-Drag-Effekte und -Techniken", "Zusammenfassung der jQuery-Erweiterungstechniken", "Zusammenfassung der gängigen klassischen jQuery-Spezialeffekte" , „Zusammenfassung der Verwendung von jQuery-Animationen und Spezialeffekten“, „Zusammenfassung der Verwendung von jQuery-Selektoren“ und „Zusammenfassung allgemeiner jQuery-Plugins und Verwendung Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der jQuery-Programmierung befassen.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage