03. JQuery 遍历元素

本文介绍了使用JQuery遍历DOM树的各种方法,包括遍历祖先元素、同胞元素及后代元素,并展示了如何利用过滤器方法进一步精确选择所需元素。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

遍历祖先元素

Jquery 提供了以下的方法向上遍历DOM树:
parent() 返回被选元素的直接父元素, 只会向上一级对 DOM 树进行遍历;
parents() 返回被选元素的所有祖先元素, 它一路向上直到文档的根元素 (<html>);
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素;
以下示例
1
<html>
2
    <body>
3
        <div>
4
            <ul>
5
                <li id="#li1">item1</li>
6
                <li class="test">item2</li>
7
                <li>item3</li>
8
            </ul>
9
            <p>Jsut for Test</p>
10
        </div>
11
    </body>
12
</html>
1
//获取<li>的父元素
2
$("#li1").parent().css({"border":"2px solid red"});
3
//获取<li>的所有父元素
4
$("#li1").parents().css({"border":"2px solid red"});
5
//获取<li>的到<div>为止的所有父元素
6
$("#li1").parentUnitl("div").css({"border":"2px solid red"});

遍历同胞元素

Jquery 提供了以下的方法向遍历DOM树的同胞元素: 
siblings() 返回被选元素的 所有同胞元素。
next() 返回被选元素的 下一个同胞元素
nextAll() 返回被选元素的 后面的所有同胞元素
nextUntil() 返回 介于两个给定参数之间的所有跟随的同胞元素
prev() 返回 被选元素的上一个同胞元素
prevAll() 返回 被选元素的前面的所有同胞元素
prevUntil() 返回 介于两个给定参数之间的所有前面的同胞元素
这些方法的使用方式同遍历祖先元素的方法类似,同样都是返回一个或一组元素对象;

遍历后代元素

Jquery 提供了以下的方法向下遍历DOM树:
children() 返回被选元素的所下一层子元素
find() 返回被选元素的后代元素,一路向下直到最后一个后代
以下示例,使用上面的html文本作示例:
1
//返回div的所有下一层元素
2
$("div").children();      //返回<ul>,<p> 2个元素
3
//返回div元素所有子元素
4
$("div").find("*");      //返回<ul>,<p> 以及<ul>以下的所有<li>元素

遍历过滤器

Jquery 提供了以下的过滤器方法,可以用于在遍历元素时,添加过滤条件;
first()返回被选元素的首个元素
last()返回被选元素的最后一个元素
eq()返回被选元素中带有指定索引号的元素(索引号从0开始)
filter()过滤元素,不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回
not()同上,不过返回不匹配标准的所有元素
以下示例,使用上面的html文本作示例:
1
//返回ul下第一个li元素
2
$("ul").children().first();         //返回item1
3
//返回ul下最后一个li元素
4
$("ul").children().last();          //返回item3
5
//返回ul下第2个li元素
6
$("ul").children().eq(1);          //返回item2
7
8
//返回ul元素下所有class="test"的li元素
9
$("ul").children().filter(".test");      //返回 item2
10
//返回ul元素下所有class!="test"的li元素
11
$("ul").children().not(".test");        //返回 item1,item3


jQuery 中,遍历 DOM 元素是操作页面结构的重要手段之一。jQuery 提供了多种方法来实现对 DOM 树的上下左右遍历,以满足不同场景下的需求。 ### 遍历元素 `children()` 方法用于获取被选元素的所有直接子元素,并且仅限于向下一级进行遍历[^2]。这对于只关注直接子节点而不涉及更深层次的节点非常有用。 ```javascript $(document).ready(function(){ $("div").children(); }); ``` ### 遍历元素 `parents()` 方法可以找到指定元素的所有祖先元素。例如,要找到 `<li>` 元素的所有祖先元素并显示它们的标签名称: ```javascript $(function(){ $("button").click(function(){ var tag = $("li").parents().map(function(){ return this.tagName; }).get().join(','); alert(tag); }); }); ``` 此代码会触发一个警报框,展示所有 `<li>` 元素的祖先元素的标签名[^3]。 ### 遍历同级元素 除了上述方法外,jQuery 还提供了 `next()`, `prev()`, `siblings()` 等方法来处理同级元素遍历。这些方法允许开发者轻松地访问当前元素前后或所有的同级兄弟节点。 ### 使用 each() 方法遍历集合 `each()` 是 jQuery 中非常强大的一个工具方法,它能够遍历任何对象,包括 DOM 元素集合、数组和对象等,并为每个匹配的元素执行一次给定的函数。 ```javascript // 遍历 DOM 元素 $('li').each(function(index, element) { console.log(index + ': ' + $(element).text()); }); // 遍历数组 $.each([1, 2, 3], function(index, value) { console.log(index + ': ' + value); }); // 遍历对象 $.each({name: 'John', age: 30}, function(key, value) { console.log(key + ': ' + value); }); ``` ### 查找后代元素 `find()` 方法用于从当前匹配的元素集中搜索所有匹配选择器的后代元素。这个方法非常适合需要深入查找特定层级下元素的情况。 以上方法结合使用,可以让开发者灵活地控制和操作网页上的 DOM 结构,从而实现更加动态和交互性强的 Web 应用程序。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值