So erhalten Sie mit jQuery_jquery einen übergeordneten Elementknoten, einen untergeordneten Elementknoten und einen Geschwisterelementknoten

Das Beispiel in diesem Artikel beschreibt, wie jQuery übergeordnete Elementknoten, untergeordnete Elementknoten und Geschwisterelementknoten erhält. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Sehen wir uns zunächst diesen HTML-Code an. Die gesamte Methode zum Abrufen von Knoten (Vater, Sohn, Bruder usw.) basiert auf diesem Code:

<ul class="par">
  <li id="firstli">
    <h3 class="title">条目一</h3>
    <ul class="par">
      <li id="dwtedx">第一项</li>
      <li>第二项</li>
    </ul>
  </li>
</ul>

Erfassung des übergeordneten JQUERY-Knotens:

Es gibt viele Möglichkeiten, übergeordnete Elemente in jquery abzurufen, z. B. parent(), parent(), close(), find, first-child, die Ihnen beim Auffinden von übergeordneten Knoten, untergeordneten Knoten und Geschwisterknoten helfen können

Zum Beispiel verwenden wir parent(), um den übergeordneten Knoten abzurufen

$("#dwtedx").parent().parent();//取得id为firstli的li节点
$("#dwtedx").parent().parent(".par");//取得最上面的ul节点
$("#dwtedx").parent(".par");
//取得向上第一层的ul节点 以上是通过parent的方式来获取父节点的、大家可以根据自己项目需要来选择方法哈

Als nächstes werden wir hauptsächlich über den Unterschied zwischen den Methoden „parents()“ und „nest()“ sprechen

1. Am nächsten beginnt der Abgleich und die Suche ab dem aktuellen Element, und die übergeordneten Elemente beginnen mit dem Abgleich und der Suche ab dem übergeordneten Element

2. Closest sucht Schritt für Schritt nach oben, bis ein passendes Element gefunden wird, 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

3. Das nächstgelegene gibt 0 oder 1 Element zurück, übergeordnete Elemente können 0, 1 oder mehrere Elemente enthalten

Der Code kann wie folgt geschrieben werden:

$('#dwtedx').parents('.par');//可以找出所有class为.par的节点
$('#dwtedx').closest('.par'); //可以找出一个父节点、就是上面一层的那个

JQUERY-Geschwisterknoten abrufen

JQuery-Geschwisterknotenerfassung. Unsere Idee besteht darin, den übergeordneten Knoten über den aktuellen Knoten zu finden und dann den untergeordneten Knoten über den übergeordneten Knoten zu finden. Der Code lautet wie folgt

$(".title").parent().find('ul');
//找到自己的兄弟节点ul 就是通过先找到 h3 与 ul 共同的父节点 li 然后来用 find() 找到 ul

Eine andere Methode ist die Verwendung der Funktion siblings(), der Code lautet wie folgt

$(".title").siblings('ul');
//找到自己的兄弟节点ul

Untergeordnete JQUERY-Knoten abrufen

Stimmt mit dem ersten untergeordneten Element überein: Zuerst stimmt nur mit einem Element überein, und dieser Selektor stimmt mit einem untergeordneten Element für jedes übergeordnete Element überein

$(".par:first-child");
//取得id为firstli的节点

Holen Sie es sich über den Selektor, der Code lautet wie folgt:

$('#firstli h3.title');
//取得条目一的h3

Verwenden Sie die Funktion find(), wie oben erwähnt, die Verwendung ist dieselbe

$("#firstli").find("h3");
//找到子兄弟节点h3

Verwenden Sie die Funktion children(), der Code lautet wie folgt

$("#firstli").children("h3.title");
//取得子节点h3、class为title 

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 allen in der jQuery-Programmierung hilfreich sein wird.