一、遍历大体分三种情况： 遍历祖先、后代、同辈
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 ?遍历
原文地址：https://www.cnblogs.com/LindaBlog/p/9212606.html