jQuery 遍历技术文档

jQuery 遍历是用于查找、筛选和操作 HTML 元素的强大函数。它可以读取 HTML 元素的属性、内容和子元素，并对它们进行操作。本文将详细介绍 jQuery 遍历的功能和常用方法。

$(selector).find()

$(selector).find() 方法用于查找元素的后代元素，支持所有的 CSS 选择器。语法如下：

$(selector).find(filter)

其中的 selector 表示要查找的元素，可以是任何有效的 CSS 选择器；而 filter 则表示筛选查找结果的选择器。例如：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>
    列表项3
    <ul>
      <li>嵌套列表1</li>
      <li>嵌套列表2</li>
    </ul>
  </li>
</ul>

现在我们想要在 ul 元素中查找所有的 li 元素，代码如下：

$("ul").find("li")

这样就可以查找到 ul 元素中的所有 li 元素。

$(selector).next()

$(selector).next() 方法用于查找指定元素的下一个同级元素。语法如下：

$(selector).next(filter)

其中的 selector 表示要查找的元素，可以是任何有效的 CSS 选择器；而 filter 则表示筛选查找结果的选择器。例如：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  <li>列表项4</li>
</ul>

现在我们想要查找第二个 li 元素的下一个同级元素，代码如下：

$("li:eq(1)").next()

这样就可以查找到第二个 li 元素的下一个同级元素。

$(selector).prev()

$(selector).prev() 方法用于查找指定元素的上一个同级元素。语法如下：

$(selector).prev(filter)

其中的 selector 表示要查找的元素，可以是任何有效的 CSS 选择器；而 filter 则表示筛选查找结果的选择器。例如：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  <li>列表项4</li>
</ul>

现在我们想要查找第四个 li 元素的上一个同级元素，代码如下：

$("li:eq(3)").prev()

这样就可以查找到第四个 li 元素的上一个同级元素。

$(selector).parent()

$(selector).parent() 方法用于查找指定元素的直接父元素。语法如下：

$(selector).parent(filter)

其中的 selector 表示要查找的元素，可以是任何有效的 CSS 选择器；而 filter 则表示筛选查找结果的选择器。例如：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  <li>列表项4</li>
</ul>

现在我们想要查找第一个 li 元素的直接父元素，代码如下：

$("li:eq(0)").parent()

这样就可以查找到第一个 li 元素的直接父元素。

$(selector).each()

$(selector).each() 方法用于遍历指定元素集合，并对每个元素执行指定操作。语法如下：

$(selector).each(function(index, element))

其中的 selector 表示要遍历的元素集合，可以是任何有效的 CSS 选择器；而 function() 则表示要执行的操作。例如：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  <li>列表项4</li>
</ul>

现在我们想要遍历所有 li 元素，并输出它们的文本内容，代码如下：

$("li").each(function(index, element) {
  console.log(index + ": " + $(element).text());
});

这样就可以依次输出所有 li 元素的文本内容。

总结

jQuery 遍历是一种非常强大的功能，能够帮助我们轻松地查找、筛选和操作 HTML 元素。本文介绍了 $(selector).find()、$(selector).next()、$(selector).prev()、$(selector).parent() 和 $(selector).each() 等常用方法，供大家参考。