So verwenden Sie die jQuery-Traversal-Add-Methode

<p>jQuery durchläuft die Add-Methode

<p>jQuery ist eine beliebte JavaScript-Bibliothek, die viele von Entwicklern häufig verwendete Funktionen kapselt und so die JavaScript-Entwicklung einfacher und effizienter macht. Eine davon ist die Möglichkeit, DOM-Elemente zu durchlaufen.

<p>In jQuery können Sie Elemente in einem Dokument auf viele Arten durchlaufen. Eine Möglichkeit besteht darin, die Methode .add() zu verwenden. .add() 方法。

什么是 add 方法

<p>.add() 方法是 jQuery 用来合并两个或多个集合的方法。它会将一个集合中的元素添加到另一个集合中。新的集合包括原始集合中的所有元素和新的元素。

<p>.add() 方法可以接受多个参数，其中每个参数都是一个 CSS 选择器、一个 DOM 元素或一组 DOM 元素。这些参数将被添加到原始集合中。

<p>考虑以下 HTML 结构：

<div class="box">
  <p>这里是段落1</p>
</div>
<div class="box">
  <p>这里是段落2</p>
</div>

<p>要选择所有的 <p> 元素和 <div> 元素，然后将它们添加到一个新的集合中，可以这样使用 .add() 方法：

var $newCollection = $('p').add('div');

<p>现在，$newCollection 将包含所有 <p> 和 <div> 元素。

遍历 DOM 元素

<p>jQuery 遍历函数返回 jQuery 对象，包含匹配给定选择器的 DOM 元素。这些函数可以过滤集合、搜索子元素和查找匹配的 DOM 元素。

<p>以下是最常用的 jQuery 遍历方法：

• .children()：返回匹配元素的子元素集合。
• .parent()：返回匹配元素的直接父元素。
• .siblings()：返回匹配元素的兄弟元素集合。
• .next()：返回匹配元素的下一个同级元素。
• .prev()：返回匹配元素的上一个同级元素。

<p>这些方法返回的 DOM 元素集合可以被进一步遍历或使用其他 jQuery 方法处理。

<p>下面的例子演示了如何使用 .siblings() 方法来查找类名为 .red 的所有兄弟元素：

<div class="box">
  <div class="red">红色盒子</div>
  <div>白色盒子1</div>
  <div>白色盒子2</div>
</div>
<div class="box">
  <div class="red">红色盒子2</div>
  <div>白色盒子3</div>
  <div>白色盒子4</div>
</div>

$(document).ready(function() {
  $('.red').siblings().css('background-color', 'gray');
});

<p>这个例子将 .red 元素的所有兄弟元素的背景颜色设置为灰色。

总结

<p>jQuery 提供了许多遍历 DOM 元素的方法来便捷地操作 HTML 和 CSS。.add() 方法可以合并两个或多个元素集合。

<p>以上是 jQuery 遍历和 .add()

Was ist die Add-Methode

.add()-Methode ist eine Methode, die von jQuery verwendet wird, um zwei oder mehr Sammlungen zusammenzuführen. Es fügt Elemente aus einer Sammlung zu einer anderen Sammlung hinzu. Das neue Set enthält alle Elemente des ursprünglichen Sets sowie neue Elemente. Die Methode 🎜🎜.add() kann mehrere Parameter akzeptieren, wobei jeder Parameter ein CSS-Selektor, ein DOM-Element oder eine Reihe von DOM-Elementen ist. Diese Parameter werden der ursprünglichen Sammlung hinzugefügt. 🎜🎜Berücksichtigen Sie die folgende HTML-Struktur: 🎜rrreee🎜Um alle <p>-Elemente und <div>-Elemente auszuwählen und sie einer neuen Sammlung hinzuzufügen, können Sie verwenden die Methode .add() wie folgt: 🎜rrreee🎜Jetzt enthält $newCollection alle <p> und &lt ; div>-Element. 🎜

DOM-Elemente durchqueren

🎜Die jQuery-Traversalfunktion gibt ein jQuery-Objekt zurück, das die DOM-Elemente enthält, die dem angegebenen Selektor entsprechen. Diese Funktionen können Sammlungen filtern, nach Unterelementen suchen und passende DOM-Elemente finden. 🎜🎜Die folgenden sind die am häufigsten verwendeten jQuery-Traversal-Methoden: 🎜

• .children(): Gibt eine Sammlung untergeordneter Elemente des übereinstimmenden Elements zurück.
• .parent(): Gibt das direkte übergeordnete Element des passenden Elements zurück.
• .siblings(): Gibt die Menge der Geschwisterelemente des passenden Elements zurück.
• .next(): Gibt das nächste Geschwisterelement des passenden Elements zurück.
• .prev(): Gibt das vorherige Geschwisterelement des passenden Elements zurück.

🎜Die von diesen Methoden zurückgegebene Sammlung von DOM-Elementen kann mit anderen jQuery-Methoden weiter durchlaufen oder verarbeitet werden. 🎜🎜Das folgende Beispiel zeigt, wie man die Methode .siblings() verwendet, um alle Geschwisterelemente mit dem Klassennamen .red zu finden: 🎜rrreeerrreee🎜Dieses Beispiel wird . Die Hintergrundfarbe aller Geschwister des roten-Elements ist auf Grau gesetzt. 🎜

Zusammenfassung

🎜jQuery bietet viele Methoden zum Durchlaufen von DOM-Elementen, um HTML und CSS bequem zu bearbeiten. Die Methode .add() kann zwei oder mehr Elementsammlungen kombinieren. 🎜🎜Das Obige ist eine kurze Einführung in die jQuery-Traversierung und die Methode .add(). Ich hoffe, es wird Ihnen hilfreich sein. 🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die jQuery-Traversal-Add-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!