jQuery遍歷add方法怎麼用

jQuery 遍歷 add 方法

jQuery 是一個流行的 JavaScript 函式庫，它封裝了許多開發者常用的功能，使得 JavaScript 開發更加簡單和有效率。其中之一就是遍歷 DOM 元素的能力。

在 jQuery 中，可以用多種方式遍歷文件中的元素。其中一種方式是使用 .add() 方法。

什麼是 add 方法

.add() 方法是 jQuery 用來合併兩個或多個集合的方法。它會將一個集合中的元素加入到另一個集合中。新的集合包括原始集合中的所有元素和新的元素。

.add() 方法可以接受多個參數，其中每個參數都是一個 CSS 選擇器、一個 DOM 元素或一組 DOM 元素。這些參數將會被加入到原始集合中。

考慮以下HTML 結構：

<div>
  <p>这里是段落1</p>
</div>
<div>
  <p>这里是段落2</p>
</div>

要選擇所有的<p></p> 元素和<div> 元素，然後將它們新增到一個新的集合中，可以這樣使用<code>.add() 方法：

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

現在，$newCollection 將包含所有<p></p> 和<div> 元素。 <h2 id="遍歷-DOM-元素">遍歷 DOM 元素</h2> <p>jQuery 遍歷函數傳回 jQuery 對象，包含符合給定選擇器的 DOM 元素。這些函數可以過濾集合、搜尋子元素和尋找符合的 DOM 元素。 </p> <p>以下是最常用的 jQuery 遍歷方法：</p> <ul> <li> <code>.children()：傳回符合元素的子元素集合。

.parent()：傳回符合元素的直接父元素。

.siblings()：傳回符合元素的兄弟元素集合。

.next()：傳回符合元素的下一個同級元素。

.prev()：傳回符合元素的上一個同級元素。

這些方法傳回的 DOM 元素集合可以被進一步遍歷或使用其他 jQuery 方法處理。

下面的範例示範如何使用.siblings() 方法來尋找類別名為.red 的所有兄弟元素：

<div>
  <div>红色盒子</div>
  <div>白色盒子1</div>
  <div>白色盒子2</div>
</div>
<div>
  <div>红色盒子2</div>
  <div>白色盒子3</div>
  <div>白色盒子4</div>
</div>

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

這個範例將.red 元素的所有兄弟元素的背景顏色設為灰色。

總結

jQuery 提供了許多遍歷 DOM 元素的方法來方便地操作 HTML 和 CSS。 .add() 方法可以合併兩個或多個元素集合。

以上是 jQuery 遍歷和 .add() 方法的簡短介紹，希望對您有幫助。