Heim > Artikel > Web-Frontend > Methodeninstanzen zur Verwendung von JQuery-Selektoren zum Abrufen von übergeordneten Elementen, untergeordneten Elementen und Geschwisterelementen

Methodeninstanzen zur Verwendung von JQuery-Selektoren zum Abrufen von übergeordneten Elementen, untergeordneten Elementen und Geschwisterelementen

伊谢尔伦Original: 2018-05-15 11:11:562828Durchsuche

1. Elternelemente abrufen

1. parent([expr]): Alle übergeordneten Elemente des angegebenen Elements abrufen

<p id="par_p"><a id="href_fir" href="#">href_fir</a> 
<a id="href_sec" href="#">href_sec</a> 
<a id="href_thr" href="#">href_thr</a></p> 
<span id="par_span"> 
<a id="href_fiv" href="#">href_fiv</a> 
</span> 
$(
document
).ready(function(){ 
$("a").parent().addClass(&#39;a_par&#39;); 
});

Firebug Jquery-Elterneffekt anzeigen

2. Geschwisterelemente abrufen:
1. next([expr]):
Das nächste Geschwisterelement des angegebenen Elements abrufen (beachten Sie, dass es das nächste ist Elemente derselben Ebene)

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/
javascript
" src="/jquery/jquery.js"></script> 
</head> 
<body> 
<ul> 
<li>list item 1</li> 
<li>list item 2</li> 
<li class="third-item">list item 3</li> 
<li>list item 4</li> 
<li>list item 5</li> 
</ul> 
<script> 
$(&#39;li.third-item&#39;).next().css(&#39;
background-color
&#39;, &#39;red&#39;); 
</script> 
</body> 
</html>

Das Ergebnis dieses Beispiels ist, dass sich nur die Hintergrundfarbe von Listenelement 4 in Rot ändert
2. nextAll([expr]):
Get all Elemente nach dem angegebenen Element Geschwisterelemente

<p><span>And Again</span></p> 
var p_nex = $("p").nextAll(); 
p_nex.addClass(&#39;p_next_all&#39;);

Achten Sie auf das letzte "e388a4556c0f65e1904146cc1a846bee"-Tag, das auch mit dem Klassennamen 'p_next_all'~~ hinzugefügt wird
3. ):
Alle Geschwisterelemente hinter dem angegebenen Element abrufen und dann das angegebene Element hinzufügen

<p>Hello</p><p>Hello Again</p><p><span>And Again</span></p> 
var p_nex = $("p").nextAll().andSelf(); 
p_nex.addClass(&#39;p_next_all&#39;);

Achten Sie auf das erste „e388a4556c0f65e1904146cc1a846bee“-Tag, dieser Satz bedeutet Auswahl „Alle“. Geschwister-Tags, die dem p-Tag folgen, sowie sich selbst. . .
Die folgenden beiden geben keine konkreten Beispiele an. Sie sind eigentlich das Gegenteil von next() und nextAll()
4: Holen Sie sich das vorherige Geschwisterelement des angegebenen Elements (das vorherige).
5. prevAll(): Alle Geschwisterelemente vor dem angegebenen Element abrufen.
3. Unterelemente abrufen
Suche nach Unterelementen Methode 1:> Zum Beispiel: var aNods = $("ul > a"); >2, Methode 2, um untergeordnete Elemente zu finden: children()
3. Methode 3, um untergeordnete Elemente zu finden: find()
Hier stellen wir kurz die Ähnlichkeiten und Unterschiede zwischen children() und find() vor:
1>-Kinder und find-Methode
wird beide verwendet, um die Unterelemente des Elements abzurufen. Keines von ihnen gibt einen Textknoten zurück, genau wie die meisten jQuery-Methoden.
2> Die Kindermethode ruft nur die untergeordneten Elemente unterhalb des Elements ab, nämlich: unmittelbare Kinder. 3> Die Suchmethode ruft alle untergeordneten Elemente ab, das heißt: Nachkommen dieser Elemente im DOM-Baum 4> Der Parameterselektor der Kindermethode ist optional (optional) und wird zum Filtern untergeordneter Elemente verwendet >Aber die Parameterauswahlmethode der Suchmethode ist erforderlich.
5> Die Suchmethode kann tatsächlich mithilfe von jQuery (Selektor, Kontext) implementiert werden. Das heißt, $('li.item-ii').find('li') entspricht $('li', 'li.item-ii'). 🎜>Verwenden Sie :$('ul.level-2').children().css('border', '1px solid green');
Verwenden Sie $('ul.level-2').find(' li') .css('border', '1px solid green').

Das obige ist der detaillierte Inhalt vonMethodeninstanzen zur Verwendung von JQuery-Selektoren zum Abrufen von übergeordneten Elementen, untergeordneten Elementen und Geschwisterelementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery css firebug var dom 选择器 border ul li

Stellungnahme：

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

Vorheriger Artikel：Detaillierte Erläuterung der Anwendungsbeispiele der jQuery-Funktion is()Nächster Artikel：Detaillierte Erläuterung der Anwendungsbeispiele der jQuery-Funktion is()

In Verbindung stehende Artikel

Mehr sehen