jQuery遍歷DOM的父級(jí)元素、子級(jí)元素和同級(jí)元素的方法總結(jié)

更新時(shí)間：2016年07月07日 17:46:40 作者：李澤

借助jQuery我們可以輕松地堆DOM元素進(jìn)行向上、向下遍歷以及同級(jí)的遍歷,本文我們即來(lái)整理jQuery遍歷DOM的父級(jí)元素、子級(jí)元素和同級(jí)元素的方法總結(jié):

如下圖，顯示了HTML中的結(jié)構(gòu)樹，通過(guò) JQuery 遍歷，您能夠從被選（當(dāng)前的）元素開始，輕松地在家族樹中向上移動(dòng)（祖先），向下移動(dòng)（子孫），水平移動(dòng)（同胞）。這種移動(dòng)被稱為對(duì) DOM 進(jìn)行遍歷。

201677173533571.jpg (350×165)

遍歷 - 父級(jí)（祖先）
向上遍歷DOM數(shù)。

通過(guò)如下三個(gè)方法，我們可以獲取父級(jí)元素：

parent()
parents()
parentsUntil()

1.JQuery parent()

parent() 方法返回被選元素的直接父元素。
該方法只會(huì)向上一級(jí)對(duì) DOM 樹進(jìn)行遍歷。

<section>
  <h1>文章的<span>標(biāo)題</span>啦</h1>
  <p>文章的內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  <p>結(jié)尾部分</p>
</section>

$(document).ready(function () {
  // 通過(guò)parent()函數(shù)，可獲取當(dāng)前元素的直接父級(jí)元素
  var elem = $('span').parent();
  console.log(elem);
});

2.JQuery parents()

parents() 方法返回被選元素的所有父元素。

<section>
  <h1>文章的<span>標(biāo)題</span>啦</h1>
  <p>文章的內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  <p>結(jié)尾部分</p>
</section>

$(document).ready(function () {
  // 通過(guò)parent()函數(shù)，可獲取當(dāng)前元素的所有父級(jí)元素
  var elem = $('span').parents();
  console.log(elem); 
});

3.JQuery parentsUntil()

parentsUntil() 方法返回介于兩個(gè)給定元素之間的所有父級(jí)元素

<section>
  <h1>文章的<span>標(biāo)題</span>啦</h1>
  <p>文章的內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  <p>結(jié)尾部分</p>
</section>

$(document).ready(function () {
  // 獲取span在body標(biāo)簽下的所有父級(jí)元素
  var elem = $('span').parentsUntil('body');
  console.log(elem);
});

遍歷 - 子級(jí)（后代）
向下遍歷DOM樹。

向下遍歷可以使用如下兩個(gè)函數(shù)：

1.children()
2.find()
1.JQuery children()

children() 方法返回被選元素的所有直接子元素。
該方法只會(huì)向下一級(jí)對(duì) DOM 樹進(jìn)行遍歷。

<section>
  <h1>文章的<span>標(biāo)題</span>啦</h1>
  <p>文章的內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  <p>結(jié)尾部分</p>
</section>

$(document).ready(function () {
  // 獲取section標(biāo)簽下的所有直接子元素
  var elem = $('section').children();
  console.log(elem);
});

2.JQuery find()

find() 方法返回被選元素的后代元素，一路向下直到最后一個(gè)后代。

<section>
  <h1>文章的<span>標(biāo)題</span>啦</h1>
  <p>文章的內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>
  <p>結(jié)尾部分</p>
</section>

$(document).ready(function () {
  // 獲取section標(biāo)簽下的所有p標(biāo)簽的子元素
  var elem = $('section').find('p');
  console.log(elem);

  // 獲取section標(biāo)簽下的所有子元素
  var elems = $('section').find('*');
  console.log(elems);
});

遍歷 - 同級(jí)（兄弟）

有以下幾個(gè)方法：
1.sibings()
除自身外，遍歷同級(jí)的所有元素，修改適用于同級(jí)所有元素

2.next()
除自身外，僅下一個(gè)元素修改

3.nextAll()
除自身外，修改下面的所有元素

4.nextUntil()
除自身外，對(duì)下面的元素進(jìn)行區(qū)間修改

5.prev()
修改上一個(gè)元素

6.preAll()
修改位于元素之上的所有元素

7.preUntil()
對(duì)位于區(qū)間之上的元素進(jìn)行區(qū)間修改

 <style>
    .bd *{
      margin:5px;
      padding:3px;
      border:3px solid black;
    }
  </style>
</head>
<body>
<div class="bd">
<p></p>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
  </div>
</body>

$(document).ready(function(){
  //$("h1").siblings().css({border:"3px solid red"})
 //$("h4").nextAll().css({border:"4px solid grey"});
  $("h2").prev().css({border:"3px solid green"});
});

您可能感興趣的文章: