jQuery 遍历
Posted Travelerᘗ
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 遍历相关的知识，希望对你有一定的参考价值。
一、遍历大体分三种情况： 遍历祖先、后代、同辈
1）、遍历祖先用到的方法：
1、parent()：返回距离指定元素最近的也是直接的父级元素。即父元素
2、parents()：返回指定元素的所有父级元素。即父元素、祖父元素、曾祖父元素
3、parents(” 元素名 “)：返回指定元素的父级元素中指定的父级元素
4、parentsUntil()：返回介于给定两个元素之间的所有父级元素。即返回的父级元素中有很多个，但是只返回其中一部分而不是全部。
2）、遍历后代用到的方法：
1、children()：返回指定元素的所有子集元素，即靠近指定元素最近的子集元素，而不是所有子集元素
2、find(" 元素名 ")：返回指定元素指定的后代元素。
3、find(" * ")：返回指定元素的所有后代元素。 切忌没有 findAll() 这种方法的说法
3）、遍历同辈用到的方法：
1、siblings()：返回指定元素的所有同辈元素
2、siblings(" 元素名 ")：返回指定元素的同辈元素中指定的元素。
3、next()：返回指定元素的同辈元素中的后面一个（紧跟着的）。返回值只有一个
4、nextAll()：返回指定元素的同辈元素中所有同辈元素。
5、nextUntil()：返回指定的两个同辈元素中间的所有同辈元素。
6、prev()：回指定元素的紧挨着的前面一个同辈元素
7、 prevAll()：返回指定元素的所有前面的同辈元素
8、prevUntil()：返回指定元素的同辈元素的前面的所有元素。
二、html源码部分
<body class="ancestors">body (曾曾祖父元素)
<div style="width:500px;">div (曾祖父元素)
<ul>ul (祖父元素)
<li class="demo">li (父元素)
<span>span</span>
<b>b b</b>
<i>i</i>
<p>pp</p>
<div class="box">div</div>
</li>
</ul>
</div>
<div style="width:500px;">div (曾祖父元素)
<ul>ul (祖父元素)
<li>li (父元素)
<span>span</span>
</li>
</ul>
</div>
</body>
</body>
三、js部分：
1、遍历祖先：
<script>
// 遍历祖先
$(document).ready(function(){
// parent是指距离最近的即直接的父级元素；parents是指所有的父级包括祖父，曾祖父，曾曾祖父
$("span").parents().css({"color":"red","border":"1px solid red"});
// 返回span的所有祖先，且是ul
$("span").parents("ul").css({"color":"blue","border":"1px solid blue"})
// 返回介于给定的两个元素之间的所有父级元素
$("span").parentsUntil("div").css({"color":"green","border":"1px solid green"});
});
</script>
2、遍历后代：
<script>
//遍历后代
$(document).ready(function(){
// children() 方法返回被选元素的所有直接子元素。即靠近div最近的元素不是所有子元素
$("div").children().css({"color":"red"});
// 返回类名为 "demo" 的所有 <li> 元素，并且它们是 <ul> 的直接子元素：
$("ul").children("li.demo").css({"color":"green"});
// find() 方法返回指定元素的指定的后代元素
$("div").find("span").css({"color":"blue"});
// find(“*”) 方法返回所有的后代元素
$("div").find("*").css({"color":"yellow"});
});
</script>
3、遍历同辈：
<script>
//遍历同胞
$(document).ready(function () {
//siblings()方法 ：返回指定元素的所有同辈元素
$("i").siblings().css({"color": "red"});
// 返回属于 <i> 的同胞元素中所有 <span> 元素：
$("i").siblings("span").css({"color": "blue"});
// next() 方法:返回指定元素的同辈元素中的后面一个（紧跟着的）。
$("i").next().css({"color": "#f0f"});
// nextAll() 方法返回指定元素的所有跟随的同辈元素。
$("span").nextAll().css({"color": "#f00f"});
// nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
$("span").nextUntil("p").css({"color": "#00c6ff"});
// prev()方法返回指定元素的紧挨着的前面一个同辈元素
$("p").prev().css({"color":"green"});
// prevAll()方法返回指定元素的所有前面的同辈元素
$("div").prevAll().css({"color":"blue"});
// prevUntil()方法:返回指定元素的同辈元素的前面的所有元素
$(".box").prevUntil().css({"color":"yellow"});
});
</script>
以上是关于jQuery 遍历的主要内容，如果未能解决你的问题，请参考以下文章
markdown 在WordPress中使用jQuery代码片段