03. JQuery 遍历元素

来源：互联网发布：淘宝手机单怎么刷视频编辑：程序博客网时间：2024/06/03 16:19

遍历祖先元素

Jquery 提供了以下的方法向上遍历DOM树：

parent()返回被选元素的直接父元素，只会向上一级对 DOM 树进行遍历；parents()返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)；parentsUntil()方法返回介于两个给定元素之间的所有祖先元素；

以下示例

<html>
    <body>
        <div>
            <ul>
                <li id="#li1">item1</li>
                <li class="test">item2</li>
                <li>item3</li>
            </ul>
            <p>Jsut for Test</p>
        </div>
    </body>
</html>

//获取<li>的父元素
$("#li1").parent().css({"border":"2px solid red"});
//获取<li>的所有父元素
$("#li1").parents().css({"border":"2px solid red"});
//获取<li>的到<div>为止的所有父元素
$("#li1").parentUnitl("div").css({"border":"2px solid red"});

遍历同胞元素

Jquery 提供了以下的方法向遍历DOM树的同胞元素：

siblings()返回被选元素的所有同胞元素。next()返回被选元素的下一个同胞元素nextAll()返回被选元素的后面的所有同胞元素nextUntil()返回介于两个给定参数之间的所有跟随的同胞元素prev()返回被选元素的上一个同胞元素prevAll()返回被选元素的前面的所有同胞元素prevUntil()返回介于两个给定参数之间的所有前面的同胞元素

这些方法的使用方式同遍历祖先元素的方法类似，同样都是返回一个或一组元素对象；

遍历后代元素

Jquery 提供了以下的方法向下遍历DOM树：

children()返回被选元素的所下一层子元素find()返回被选元素的后代元素，一路向下直到最后一个后代

以下示例，使用上面的html文本作示例：

//返回div的所有下一层元素
$("div").children();      //返回<ul>,<p> 2个元素
//返回div元素所有子元素
$("div").find("*");      //返回<ul>,<p> 以及<ul>以下的所有<li>元素

遍历过滤器

Jquery 提供了以下的过滤器方法，可以用于在遍历元素时，添加过滤条件；

first()返回被选元素的首个元素last()返回被选元素的最后一个元素eq()返回被选元素中带有指定索引号的元素（索引号从0开始）filter()过滤元素，不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回not()同上，不过返回不匹配标准的所有元素

以下示例，使用上面的html文本作示例：

//返回ul下第一个li元素
$("ul").children().first();         //返回item1
//返回ul下最后一个li元素
$("ul").children().last();          //返回item3
//返回ul下第2个li元素
$("ul").children().eq(1);          //返回item2
​
//返回ul元素下所有class="test"的li元素
$("ul").children().filter(".test");      //返回 item2
//返回ul元素下所有class！="test"的li元素
$("ul").children().not(".test");        //返回 item1，item3

阅读全文

0 0