您的位置：首页 > Web前端 > JQuery

jquery中DOM节点操作（五）

2016-12-13 19:41 232 查看

五、遍历节点树

1. 遍历祖先：

parent()：返回被选元素的直接父元素，该方法只沿着 DOM 树向上遍历单一层级

parents() ：返回被选元素的所有祖先元素，它一路向上直到文档的根元素

parentsUntil()：返回介于两个给定元素之间的所有祖先元素

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<style type="text/css">

.ancestors *{

padding: 5px;

margin: 15px;

display: block;

border: 2px solid lightgrey;

color: lightgrey;

}

</style>

<title>Document</title>

<script src="js/jquery-3.1.1.min.js"></script>

<script type="text/javascript">

$(function(){

// 遍历祖先

$("span").parent().css("color","red");

$("span").parents().css("color","blue");

$("span").parents("div").css("color","green");

$("span").parentsUntil("div").css("font-size","30px");

});

</script>

</head>

<body class="ancestors">body（曾曾祖父元素）

<div style="width: 500px;">div(曾祖父元素)

<ul>ul(祖父元素)

<li>li1(父元素)<span>span</span></li>

<li class="li2">li2</li>

<li>li3</li>

<li class="li4">li4</li>

<li>li5</li>

</ul>

</div>

</body>

</html>

2. 遍历同代

siblings（）：用于匹配目标元素的所有兄弟元素

next()：用于匹配元素的下一个兄弟节点

nextAll()：用于匹配元素的所有下一个兄弟节点

nextUntil()：用于匹配元素介于两个参数之间的所有下一个兄弟节点

prev()：用于匹配元素的上一个兄弟节点

prevAll()：用于匹配元素的所有上一个兄弟节点

prevUntil()：用于匹配元素介于两个参数之间的所有上一个兄弟节点

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<style type="text/css">

.ancestors *{

padding: 5px;

margin: 15px;

display: block;

border: 2px solid lightgrey;

color: lightgrey;

}

</style>

<title>Document</title>

<script src="js/jquery-3.1.1.min.js"></script>

<script type="text/javascript">

$(function(){

// 遍历同代

$(".li2").siblings().css("color","red");

$(".li2").siblings(".li4").css("color","green");

$(".li2").next().css("color","blue");

$(".li2").nextAll().css("font-size","30px");

$(".li2").nextAll(".li4").css("font-size","10px");

$(".li2").nextUntil(".li4").css("color","orange");

});

</script>

</head>

<body class="ancestors">body（曾曾祖父元素）

<div style="width: 500px;">div(曾祖父元素)

<ul>ul(祖父元素)

<li>li1(父元素)<span>span</span></li>

<li class="li2">li2</li>

<li>li3</li>

<li class="li4">li4</li>

<li>li5</li>

</ul>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 遍历节点树祖先同代

相关文章推荐

新的分享

章节导航