jQuery 遍历
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()
等常用方法,供大家参考。