jQuery對DOM元素的向上、向下、同級遍歷和過濾
阿新 • • 發佈：2019-01-11
jQuery的向下遍歷
例子：
<script src="../JS/Extend.js"></script>
<script src="../JS/my.js"></script>
<link type="text/css" rel="stylesheet" href="../CSS3/my.css">
</head>
<body>
<div id="div1">
<div id="div2">
<p id="p1">
<a>hello world</a children()方法的元素遍歷
$(document).ready( function (){
$("#div1").children().css({border:"3px solid black"});
});find()方法的元素遍歷
$(document).ready( function (){
$("#div1").find("a").css({border:"3px solid grey"});
});兩者區別：
一、children引數可有可無，而find必有引數
二、children只能對元素的兒子元素進行修改，而find則可以對其所有的子元素進行修改。
jQuery的向上遍歷
顧名思義，向上遍歷就是從子集找到父集。
.parent()
$(document).ready( function (){
$("#div2").parent().css({border:"3px solid black"});
});div2的父元素div1邊框發生了改變
.parents()
$(document).ready( function (){
$("a").parents().css({border:"3px solid grey"});
});a元素除外，a元素的所有父級元素都發生了改變
.parentUntil()
$(document).ready( function (){
$("a").parentsUntil("#div1").css({border:"3px solid grey"})
});從a元素到div1元素之前的元素邊框發生了改變。
三個方法的區別：
- .parent()只能向上遍歷一層；
- .parents()則可以指定父級元素的id進行跨越遍歷；
- .parentUntil()則具有區間性質，將會遍歷包含於區間中的所有元素。
遍歷 - 同級（兄弟）
同級元素擁有相同的父級元素。在 DOM 樹中水平遍歷。
有許多有用的方法讓我們在 DOM 樹進行水平遍歷：
siblings() 、next() 、nextAll() 、nextUntil() 、prev() 、prevAll() 、prevUntil()
例子如下：
<section>
<h1>文章的<span>標題</span>啦</h1>
<p>文章的內容內容內容內容內容內容</p>
<p>結尾部分</p>
</section>JQuery siblings()
$(document).ready(function () {
// 獲取h1標籤的所有同級元素
var elem = $('h1').siblings();
console.log(elem); // p p
});JQuery next()
next() 方法返回被選元素的下一個同胞元素
$(document).ready(function () {
// 獲取h1標籤的下一個同級元素
var elem = $('h1').next();
console.log(elem); // p
});JQuery nextAll()
nextAll() 方法返回被選元素的所有跟隨的同胞元素。
$(document).ready(function () {
// 獲取p標籤的後面的所有同級元素
var elem = $('p').nextAll();
console.log(elem); // p
});JQuery nextUntil()
nextUntil() 方法返回介於兩個給定引數之間的所有跟隨的同胞元素。
$(document).ready(function () {
// 獲取
var elem = $('h1').nextUntil('h2');
console.log(elem); // p p
});JQuery prev() & prevAll() & prevUntil()
prev(), prevAll() 以及 prevUntil() 方法的工作方式與上面的方法類似，只不過方向相反而已：它們返回的是前面的同級元素（在 DOM 樹中沿著同胞元素向後遍歷，而不是向前）。