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() 方法的简短介绍，希望对您有所帮助。