jQuery 水平遍歷
在DOM 樹中水平遍歷
有許多有用的方法讓我們在DOM 樹進行水平遍歷：
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()
#siblings() 方法
siblings() 方法傳回被選元素的所有同胞元素。
可以使用可選參數來過濾同胞元素的搜尋。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.siblings *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("h2").siblings("p").css({"color":"red","border":"2px solid blue","width":"200px"});
});
</script>
</head>
<body class="siblings">
<div>div (父元素)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
</body>
</html>傳回屬於 <h2> 的同胞元素的所有 <p> 元素。
next() 方法
next() 方法傳回被選元素的下一個同胞元素。
該方法只傳回一個元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.siblings *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("h2").next().css({"color":"red","border":"5px solid blue","width":"200px"});
});
</script>
</head>
<body class="siblings">
<div>
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
</body>
</html>返回 <h2> 的下一個同胞元素。
nextAll() 方法
nextAll() 方法傳回所有被選元素的跟隨的同胞元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.siblings *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("h2").nextAll().css({"color":"red","border":"3px solid blue","width":"200px"});
});
</script>
</head>
<body class="siblings">
<div>
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
</body>
</html>返回 <h2> 的所有跟隨的同胞元素。
nextUntil() 方法
nextUntil() 方法傳回介於兩個給定參數之間的所有跟隨的同胞元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.siblings *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("h2").nextUntil("h6").css({"color":"red","border":"4px solid blue","width":"200px"});
});
</script>
</head>
<body class="siblings">
<div>
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>p</p>
</div>
</body>
</html><h2> 與 <h6> 元素之間的所有同胞元素。
jQuery prev(), prevAll() & prevUntil() 方法
prev(), prevAll() 以及prevUntil() 方法的工作方式與上面的方法類似，只不過方向相反而已：它們返回的是前面的同胞元素（在DOM 樹中沿著同胞元素向後遍歷，而不是向前）。
新建檔案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".father div").prevUntil(".firstp","span").css({"color":"red","border":"4px solid blue"})
});
</script>
<style type="text/css">
.father {
height:200px;
width:200px;
border:1px solid blue;
}
</style>
</head>
<body>
<div class="father">
<p class="firstp">我是p元素</p>
<span>我是span元素</span>
<p>我是p元素</p>
<div>我是div元素</div>
</div>
</body>
</html>
預覽
Clear
- 課程推薦
- 課件下載
課件暫不提供下載，工作人員正在整理中，後期請多關注該課程~ 