一．什么是遍历？
jQuery 遍历，意为“查找”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。
以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家
族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍
历。
图示解释：
<div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。<ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素左边的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同时是 <div>的后代<span>元素是 <li> 的子元素，同时是 <ul> 和 <div> 的后代。两个 <li> 元素是同胞（拥有相同的父元素）右边的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同时是 <div> 的后代。<b> 元素是右边的 <li>的子元素，同时是 <ul> 和 <div> 的后代** 提示：祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。**
二．遍历的方法
2-1 向上遍历 DOM 树
parent() :返回被选元素的直接父元素。
body代码
<body class="ancestors">body(曾曾祖父节点)
<div style="width: 500px;">div(曾祖父节点)
<ul>ul(祖父节点)
<li>li(直接父节点)
<span>span</span>
</li>
</ul>
</div>
</body>css代码
<style>
body *:not(script){display: block; border:2px solid lightgrey; color:#ccc;
padding: 5px; margin: 15px;}
script{display: none;border: none;}
</style>js代码
<script>
$(document).ready(function(){
$("span").parent().css({"color":"red","border":"2px solid red"});
});
</script>**parents():返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
body代码和css代码和上面一样
js代码
<script>
$(document).ready(function(){
$("span").parents().css({//所有的祖先元素
// $("span").parents("div").css({//可以指定祖先元素
"color":"red","border":"2px solid red",
});
});
</script>parentsUntil():返回介于两个给定元素之间的所有祖先元素
body代码和css代码和上面一样
js代码
<script>
$(document).ready(function(){
$("span").parentsUntil("body").css({//向上查找遇见某个元素祖先元素为止
"color": "red",
"border": "2px solid red"
});
});
</script>2-2 向下遍历 DOM 树
children() : 返回被选元素的所有直接子元素。、
body代码
<body>body(曾曾祖父节点)
<div style="width: 500px;">div(曾祖父节点)
<ul>ul(祖父节点)
<li>li(直接父节点)
<span>span1</span>
</li>
<li>li(直接父节点)
<span>span2</span>
</li>
</ul>
</div>
</body>css代码和上面一样
js代码
<script>
$(document).ready(function() {
//查找子元素(按照从属关系来)
$("ul").children("li:first-child").children("span").css({
//find==》 按照指定的条件向下查找
// $("ul").find("span:contains(1)").css({
// $("ul").find("li:eq(0) span").css({
"color": "red",
"border": "2px solid red"
});
});
</script>find():返回被选元素的所有的后代元素，一路向下直到最后一个后
代。
body代码和css代码和上面一样
js代码
<script>
$(document).ready(function() {
$("ul").find("span").css({
"color": "red",
"border": "2px solid red"
});
});
</script>2-3 水平遍历 DOM 树
2-3-1向后遍历
siblings ():返回被选元素的所有同胞元素。
body代码
<body class="ancestors">body (曾曾祖父节点)
<div style="width:500px;" class="siblings">
<ul>ul (父节点)
<li>li (类名为"star"的上一个兄弟节点)</li>
<li>li (类名为"star"的上一个兄弟节点)</li>
<li class="start">li (兄弟节点)</li>
<li>li (类名为"star"的下一个兄弟节点)</li>
<li>li (类名为"star"的下一个兄弟节点)</li>
</ul>
</div>
<p>在这个例子中,我们选择类名称为“star”的li元素的所有兄弟元素。</p>
</body>css代码
body * {
display: block;
border: 2px solid lightgrey;
color: #ccc;
padding: 5px;
margin: 15px;
}
script {
display: none;
border: none;
}js代码
$(document).ready(function() {
$(".start").siblings().css({
"color": "red",
"border": "2px solid red"
});
});next ( ):返回被选元素的下一个同胞元素。
body代码和css代码和上面一样
$(document).ready(function() {
$(".start").next().css({
"color": "red",
"border": "2px solid red"
});
});nextAll( ): 返回被选元素的所有跟随的同胞元素。
body代码和css代码和上面一样
$(document).ready(function() {
$("li.start").nextAll().css({
"color": "red",
"border": "2px solid red"
});
});nextUntil( ): 返回介于两个给定参数之间的所有跟随的同胞元素。
body代码
<body class="ancestors">body (曾曾祖父节点)
<div style="width:500px;" class="siblings">
<ul>ul (父节点)
<li>li (类名为"star"的上一个兄弟节点)</li>
<li>li (类名为"star"的上一个兄弟节点)</li>
<li class="start">li (兄弟节点)</li>
<li>li (类名为"star"的下一个兄弟节点)</li>
<li>li (类名为"star"的下一个兄弟节点)</li>
<li>li (类名为"star"的下一个兄弟节点)</li>
<li>li (类名为"star"的下一个兄弟节点)</li>
<li>li (类名为"star"的下一个兄弟节点)</li>
</ul>
</div>
<p>在这个例子中,我们选择类名称为“star”的li元素的所有兄弟元素。</p>
</body>css代码和上面一样
js代码
$(document).ready(function() {
$("li.start").nextUntil("li:last-child").css({
// $("li.start~li").not("li:last-child").css({
// $("ul").children("li:eq(3),li:eq(4),li:eq(5),li:eq(6)").css({
// $("li:eq(7)").prevAll().not("li:gt(3)").css({
"color": "red",
"border": "2px solid red"
});
});2-3-2向前遍历
prev( ) : 返回被选元素的上一个同胞元素
prevAll( ) : 返回被选元素前面所有的同胞元素。
prevUntil( ):返回被选元素之前介于两个给定参数之间所有的同胞元素。
body代码
<body class="ancestors">body (曾曾祖父节点)
<div style="width:500px;" class="siblings">
<ul>ul (父节点)
<li class="first">li (类名为"star"的上一个兄弟节点)</li>
<li>li (类名为"star"的上一个兄弟节点)</li>
<li>li (类名为"star"的上一个兄弟节点)</li>
<li>li (类名为"star"的上一个兄弟节点)</li>
<li class="start">li (兄弟节点)</li>
<li>li (类名为"star"的下一个兄弟节点)</li>
<li>li (类名为"star"的下一个兄弟节点)</li>
<li>li (类名为"star"的下一个兄弟节点)</li>
</ul>
</div>
<p>在这个例子中,我们选择类名称为“star”的li元素的所有兄弟元素。</p>
</body>css代码
js代码
<script>
$(document).ready(function() {
//上一个兄弟元素
// $(".start").prev().css("color","red")
//上面所有的兄弟元素
// $(".start").prevAll().css("color","red")
//查找上面所有的兄弟元素，直到遇见某个元素为止
//$(".start").prevUntil("li:first").css("color","red")
$(".start").prevAll("[class!=first]").css("color","red")
});
</script>2-4 过滤
备注:此过滤为对象的方法，不同于选择器
通用语法:(selector).last()、$(selector).eq()、
(selector).not()、$(selector).is()
first ():返回被选元素的首个元素。
last ():返回被选元素的最后一个元素。
eq( ): 返回被选元素中带有指定索引号的元素。
<style>
body * {
display: block;
border: 2px solid lightgrey;
color: #ccc;
padding: 5px;
margin: 15px;
}
script {
display: none;
border: none;
}
</style>
<script>
$(function(){
$("li").first().css("color","red")
$("li").last().css("color","green")
$("li").not(":eq(2)").css("font-size","26px")
$("li").eq(3).css("background","red")
})
</script>
<body>
<body class="ancestors">body (曾曾祖父节点)
<div style="width:500px;" class="siblings">
<ul>ul (父节点)
<li>li (类名为"star"的上一个兄弟节点)</li>
<li>li (类名为"star"的上一个兄弟节点)</li>
<li class="start">li (兄弟节点)</li>
<li>li (类名为"star"的下一个兄弟节点)</li>
<li>li (类名为"star"的下一个兄弟节点)</li>
</ul>
</div>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
</body>filter( ):规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素被返回。
例如: $("li").filter(":not(:contains('暗香'))").removeClass()not( ): 返回不匹配标准的所有元素
is( ): 根据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回 true。
<script>
$(function(){
if($("p").parent().is("div")){//用于判断
alert("p的父元素是div")
}
if($("p").children().is("span")){
alert("p的子元素是span")
}
})
</script>
<body>
<div>
<p>段落
<span>段落中的span</span>
</p>
</div>
</body>$("selector").has("sub_selector").length
用来检测某个子元素是否存在 存在为 1 否则为 0 Example:
console.log( $("li").eq(1).has("span").length)2-5 jQuery 中 each 遍历的三种方法 $().each()
1、普通遍历
$('div').each(function (){
//code
});案例：
<script src="../../js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
var colors = ["red", "green", "cyan", "orange", "purple"]
var sum = 0;
$("p").css({
"width": "100px",
"height": "100px",
"border": "1px solid #333",
"float": "left",
"margin-right": "20px",
"line-height": "100px",
"text-align": "center",
}).each(function() {
sum += parseInt($(this).text());
$(this).css({
"background-color": colors[Math.floor(Math.random() * 5)],
"color": colors[Math.floor(Math.random() * 5)],
})
})
console.log(sum);
})
</script>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</body>显示结果
2、选择器+遍历
$('div').each(function (i){
i 就是索引值
this 表示获取遍历每一个 dom 对象
//this.html(“”)
});案例
<style type="text/css">
* {margin: 0;padding: 0;}
.imgcss{display: inline-block; border: 10px solid #fff;
box-shadow: 2px 2px 3px #ccc;margin: 0 10px 0 10px;}
</style>
<script src="../../js/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$("img").each(function(i){
this.src="img/"+(i+1)+".jpg"
$(this).hover(function(){
$(this).toggleClass("imgcss")
})
})
})
</script>
<body>
<img />
<img />
<img />
</body>3、选择器+元素
$('div').each(function (index,domEle){
index 就是索引值
domEle 表示获取遍历每一个 dom 对象
});案例：
<script>
$(function() {
var colors = ["red", "green", "cyan", "orange", "purple"]
$("li").each(function(index,element) {//index索引 element——li(this)
$(element).html("编号" + (index + 1))
.css({
"background-color":colors[Math.floor(Math.random()*3)],
"width": "100px",
"height": "100px",
"float":"left",
"margin-right": "10px",
"list-style": "none",
})
})
})
</script>
<body>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</body>4、更适用的遍历方法[json]
(1）先获取某个集合对象
(2）遍历集合对象的每一个元素
var d=$("div");
$.each(obj,function (index,domEle){
obj 是要遍历的集合
index 就是索引值
domEle 表示获取遍历每一个 dom 对象
});
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
