当前位置：首页 > 资讯 > 技术文档

jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结

时间：2020-01-18 11:22 编辑：来源：阅读：
扫一扫，手机访问

摘要：jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结

如下图，显示了HTML中的结构树，通过 JQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。 [img]http://files.jb51.net/file_images/article/201607/201677173533571.jpg?201667173553[/img] [b]遍历 - 父级（祖先） [/b]向上遍历DOM数。通过如下三个方法，我们可以获取父级元素： [list=1] [*]parent()[/*] [*]parents()[/*] [*]parentsUntil()[/*] [/list] [b]1.JQuery parent()[/b] parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。

<section>
  <h1>文章的<span>标题</span>啦</h1>
  <p>文章的内容内容内容内容内容内容</p>
  <p>结尾部分</p>
</section>

$(document).ready(function () {
  // 通过parent()函数，可获取当前元素的直接父级元素
  var elem = $('span').parent();
  console.log(elem);
});

[b]2.JQuery parents()[/b] parents() 方法返回被选元素的所有父元素。

<section>
  <h1>文章的<span>标题</span>啦</h1>
  <p>文章的内容内容内容内容内容内容</p>
  <p>结尾部分</p>
</section>

$(document).ready(function () {
  // 通过parent()函数，可获取当前元素的所有父级元素
  var elem = $('span').parents();
  console.log(elem); 
});

[b]3.JQuery parentsUntil()[/b] parentsUntil() 方法返回介于两个给定元素之间的所有父级元素

<section>
  <h1>文章的<span>标题</span>啦</h1>
  <p>文章的内容内容内容内容内容内容</p>
  <p>结尾部分</p>
</section>

$(document).ready(function () {
  // 获取span在body标签下的所有父级元素
  var elem = $('span').parentsUntil('body');
  console.log(elem);
});

[b]遍历 - 子级（后代） [/b]向下遍历DOM树。向下遍历可以使用如下两个函数： 1.children() 2.find() [b]1.JQuery children()[/b] children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。

<section>
  <h1>文章的<span>标题</span>啦</h1>
  <p>文章的内容内容内容内容内容内容</p>
  <p>结尾部分</p>
</section>

$(document).ready(function () {
  // 获取section标签下的所有直接子元素
  var elem = $('section').children();
  console.log(elem);
});

[b]2.JQuery find()[/b] find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

<section>
  <h1>文章的<span>标题</span>啦</h1>
  <p>文章的内容内容内容内容内容内容</p>
  <p>结尾部分</p>
</section>

$(document).ready(function () {
  // 获取section标签下的所有p标签的子元素
  var elem = $('section').find('p');
  console.log(elem);

  // 获取section标签下的所有子元素
  var elems = $('section').find('*');
  console.log(elems);
});

[b]遍历 - 同级（兄弟）[/b] 有以下几个方法： [b]1.sibings() [/b]除自身外，遍历同级的所有元素，修改适用于同级所有元素 [b]2.next() [/b]除自身外，仅下一个元素修改 [b]3.nextAll() [/b]除自身外，修改下面的所有元素 [b]4.nextUntil() [/b]除自身外，对下面的元素进行区间修改 [b]5.prev() [/b]修改上一个元素 [b]6.preAll() [/b]修改位于元素之上的所有元素 [b]7.preUntil() [/b]对位于区间之上的元素进行区间修改

 <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"});
});

全部评论(0)

上一篇：使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
下一篇：jquery遍历checkbox介绍

资讯排行榜
更多>>