Heim > Artikel > Web-Frontend > So durchlaufen Sie Knoten mit JQuery
So durchlaufen Sie Knoten mit JQuery
- coldplay.xixiOriginal
- 2020-11-16 13:44:283963Durchsuche
Methoden zum Durchlaufen von Knoten durch JQuery: 1. Verwenden Sie die Methode [children()], um die Menge der untergeordneten Elemente des Elements abzugleichen. 2. Verwenden Sie die Methode [next()], um die gleichgeordneten Elemente direkt hinter dem Element abzugleichen . Verwenden Sie die Methode [prev()], um die unmittelbar vorhergehenden Geschwisterelemente eines Elements abzugleichen.
Die Betriebsumgebung dieses Tutorials: Windows10-System, jquery2.2.4, dieser Artikel gilt für alle Computermarken.
Empfohlen: „jquery-Video-Tutorial“
Jquery-Knotendurchlaufmethode:
1. Children()-Methode
Diese Methode wird verwendet, um den Satz untergeordneter Elemente des passenden Elements zu erhalten.
Verwenden Sie die Methode children(), um die Anzahl aller untergeordneten Elemente des passenden Elements zu ermitteln.
var $body=$("body").children();
var $p=$("p").children();
var $ul=$("ul").children();
alert("$body.length"); //<body>元素下有2个子元素
alert($p.length); //<p>元素下有0个子元素
alert("$ul.length"); //<ul>元素下有3个子元素
for(var i=0;len=$ul.length;i<len;i++)<br>{
alert($ul[i].innerHTML); //循环输出<li>元素的HTML内容
}2. next()-Methode
Diese Methode wird verwendet, um die Geschwisterelemente direkt hinter dem passenden Element zu erhalten.
var $p1=$("p").next;//Holen Sie sich die Geschwisterelemente direkt nach dem
Das Ergebnis wird sein: var $p1=$("p").next;//获取紧邻
元素后的同辈元素
得到的结果将是：
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>3、prev()方法
该方法用于取得匹配元素前面紧邻的同辈元素
从dom树的结构中可以知道
- 元素的上一个同辈节点是
- 元素也互为同辈元素。
如果要获取
元素的同辈元素，则可以使用如下代码：
var $p2=$("p").siblings();<ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul>3 ()-Methode
Diese Methode wird verwendet, um das Geschwisterelement unmittelbar vor dem passenden Element zu erhalten
Aus der Struktur des Dom-Baums können wir erkennen, dass der vorherige Geschwisterknoten des- -Elements
- -Elemente sind ebenfalls Geschwisterelemente. 🎜🎜Wenn Sie die Geschwisterelemente des
-Elements erhalten möchten, können Sie den folgenden Code verwenden: 🎜🎜
var $p2=$("p").siblings();/ /Holen Sie sich den unmittelbaren Nachbarn ist: 🎜$(document).bind("click",function(e){ $(e.target).closest("li").css("color","red"); })🎜🎜5most(). Überprüfen Sie zunächst, ob das aktuelle Element übereinstimmt, und geben Sie in diesem Fall das Element selbst direkt zurück. Wenn es keine Übereinstimmung gibt, suchen Sie Schritt für Schritt 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. 🎜🎜Um beispielsweise dem nächstgelegenen li-Element des angeklickten Zielelements Farbe hinzuzufügen, können Sie den folgenden Code verwenden: 🎜rrreee🎜🎜Verwandte kostenlose Lernempfehlungen: 🎜JavaScript🎜 (Video)🎜🎜
, damit wir die prev()-Methode verwenden können, um das
-Element abzurufen, lautet der Code wie folgt:
var $ul=$("ul").prev();// Holen Sie sich das Geschwisterelement direkt vor dem- -Element
Das Ergebnis wird sein:
🎜🎜Diese Methode wird verwendet, um alle Geschwisterelemente vor und nach dem passenden Element zu erhalten. 🎜🎜
4. siblings()-Methode<p title="Wählen Sie Ihre Lieblingsfrucht.">Was ist Ihre Lieblingsfrucht? </p> <a href="https://www.php.cn/course/list/17.html" target="_blank" textvalue="javascript"></a>
🎜🎜Oben Im Code wurde die Methode siblings () verwendet, mit der die Geschwisterknoten des übereinstimmenden Elements abgerufen werden sollten, dh die Geschwisterelemente des übereinstimmenden Elements. 🎜🎜Nehmen Sie als Beispiel die Struktur des DOM-Baums. Das - -Element ist ein Geschwisterelement, und die drei
- -Elemente sind ebenfalls Geschwisterelemente. 🎜🎜Wenn Sie die Geschwisterelemente des
，因此可以通过prev()方法来获取
元素，代码如下：
var $ul=$("ul").prev();//取得紧邻
- 元素前的同辈元素
得到的结果将是：
<p title="选择你最喜欢的水果.">你最喜欢的水果是？</p>
4、siblings()方法
该方法用于取得匹配元素前后所有的同辈元素。
上面的代码中就用到了siblings()方法，当时是为了获取匹配元素的兄弟节点，即获取匹配元素的同辈元素。
以DOM树的结构为例。
- 元素和
元素互为同辈元素，
- 元素下的3个
Das obige ist der detaillierte Inhalt vonSo durchlaufen Sie Knoten mit JQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!