jQuery遍历
祖先
1、parent()—返回所有被选元素的直接父元素。
2、parents()—返回被选元素的所有祖先元素,它一路向上直到文档的根元素 ()。html也算。
3、parentsUntil—返回介于两个给定元素之间的所有祖先元素。不包含两个给定的元素
下面的例子返回介于<span> 与<div> 元素之间的所有祖先元素:
$(document).ready(function(){
$("span").parentsUntil("div");
});
后代
1、children()–返回被选元素的所有儿子
2、find(参数)—返回被选元素里含符合参数的元素(算上子孙了)
实例:
<script>
$(document).ready(function(){
$("div").find("span").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div class="descendants" style="width:500px;">div (当前元素)
<span>儿子元素</span>
<p>p (儿子元素)
<span>span (孙子元素)</span>
</p>
<p>p (儿子元素)
<span>span (孙子元素)</span>
</p>
</div>
</body>
同胞
1、siblings()—返回被选元素的所有同胞元素。可以用参数过滤(上下的同胞都包含)
实例:
$(document).ready(function(){
$("h2").siblings();
});
//使用参数来过滤
//属于 <h2> 的同胞元素的所有 <p> 元素:
$(document).ready(function(){
$("h2").siblings("p");
});
2、next()—返回被选元素的下一个同胞元素。
实例:
//()里加参数无效。也没有实际意义。
$(document).ready(function(){
$("h2").next();
});
3、nextAll()—返回被选元素的下面所有跟随的同胞元素。
实例:
//()里加参数无效。也没有实际意义。
$(document).ready(function(){
$("h2").nextAll();
});
4、nextUntil()—返回介于两个给定参数之间的下面所有跟随的同胞元素。
实例:
//返回h2下面到h6的所有元素:
$(document).ready(function(){
$("h2").nextUntil("h6");
});
5、prev()----返回被选元素的上一个同胞元素
实例:
//()里加参数无效。也没有实际意义。
$(document).ready(function(){
$("h2").prev();
});
6、prevAll()—返回被选元素的上面所有跟随的同胞元素。
实例:
//()里加参数无效。也没有实际意义。
$(document).ready(function(){
$("h2").prevAll();
});
7、prevUntil()----返回介于两个给定参数之间的上面所有跟随的同胞元素。
实例:
//返回h2之前到p截止所有元素
<script>
$(document).ready(function(){
$("h2").prevUntil("p").css({"color":"red","border":"2px solid red"});
});
</script>