Jquery—遍历元素

最新推荐文章于 2024-04-19 15:19:10 发布

Tiramisu_C

最新推荐文章于 2024-04-19 15:19:10 发布

阅读量1.4k

点赞数 1

分类专栏： Jquery Jquery学习之路文章标签： Jquery 遍历

本文链接：https://blog.csdn.net/nongweiyilady/article/details/53863955

版权

Jquery 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

Jquery学习之路

8 篇文章 3 订阅

订阅专栏

1.遍历祖先

向上遍历 DOM 树的几个方法：

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

用法：

$("span").parent().toggleClass("green");
$("span").parents().toggleClass("green");
$(".span1").parentsUntil(".bigbox").toggleClass("green");

2.遍历后代

向下遍历 DOM 树的 jQuery 方法

children()—返回被选元素的所有直接子元素，该方法只会向下一级对 DOM 树进行遍历。
find()—返回被选元素的后代元素，一路向下直到最后一个后代。

用法：

 $(".bigbox").children().toggleClass("green");
 $(".bigbox").find("div").toggleClass("green");

还可以使用“ * ”选中被选元素的所有后代元素：

 $(".bigbox").find("*").toggleClass("green");

可过滤被选元素直接后代元素：

 $(".list").children(".red").toggleClass("green");

3.遍历同胞

jquery水平遍历的几个方法:

siblings()—返回被选元素的所有同胞元素，不包括自己；
next()—返回被选元素的下一个同胞元素；
nextAll()—返回被选元素的所有跟随的同胞元素；
nextUntil()—返回介于两个给定参数之间的所有跟随的同胞元素；
prev()—与next()方向相反，用法相似；
prevAll()—与nextAll()方向相反，用法相似；
prevUntil()—与nextUntil()方向相反，用法相似。

用法：

$(".li4").next().text("next更新");
$(".li1").nextUntil(".li3").text("nextUntil更新");

4.遍历过滤

jquery几个最基本的过滤方法是；

first()—返回被选元素的首个元素；

last()—返回被选元素的最后一个元素；

eq()—返回被选元素中带有指定索引号的元素；

filter() —规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回；

not()—返回不匹配标准的所有元素，not() 方法与 filter() 相反。

它们允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

用法：

$("li").first().text("first元素"); //li中第一个元素
$("li").last().text("last元素"); //li中最后一个元素
$("li").eq(4).text("four元素"); //li中索引号为4的元素
$("li").filter(".li4").text("filter更新"); //li中排除class="li4"的元素
$("li").not(".li4").text("not更新"); //li中排除class="li4"的所有元素

本文参考资料来自：http://www.runoob.com/jquery/jquery-traversing.html