jquery遍历操作

最新推荐文章于 2026-01-08 11:09:44 发布

转载最新推荐文章于 2026-01-08 11:09:44 发布 · 427 阅读

文章标签：

#javascript #ViewUI

jquery 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用jQuery遍历DOM节点的各种方法，包括遍历祖先节点（如parent(), parents(), parentsUntil()）、遍历孩子节点（如children(), find()）以及遍历兄弟节点（如siblings(), next(), nextAll(), prev(), prevAll(), prevUntil()）。

（1）遍历祖先

1.获得直接父节点parent()

<!DOCTYPE html>
<html>
<head>
<style>
.ancestors *
{ 
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(){
  $("span").parent().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div class="ancestors">
  <div style="width:500px;">div (great-grandparent)
    <ul>ul (grandparent)  
      <li>li (direct parent)
        <span>span</span>
      </li>
    </ul>   
  </div>

  <div style="width:500px;">div (grandparent)   
    <p>p (direct parent)
        <span>span</span>
      </p> 
  </div>
</div>

</body>
</html>

2.获得所有祖先节点parents()

会获得从当前节点直到根节点<html>的所有节点

<!DOCTYPE html>
<html>
<head>
<style>
.ancestors *
{ 
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(){
  $("span").parents().css({"color":"red","border":"2px solid red"});
});
</script>
</head>

<body class="ancestors">body (great-great-grandparent)
  <div style="width:500px;">div (great-grandparent)
    <ul>ul (grandparent)  
      <li>li (direct parent)
        <span>span</span>
      </li>
    </ul>   
  </div>
</body>

<!-- The outer red border, before the body element, is the html element (also an ancestor) -->
</html>

如果觉得其中的节点过多，可以筛选标签类型

$(document).ready(function(){
  $("span").parents("ul");
});

这样就会返回从span到根节点的所有ul元素

3.获得指定区间的所有祖先节点parentsUntil()

$(document).ready(function(){
  $("span").parentsUntil("div");
});

（2）遍历孩子

1.获得所有直接孩子children()

<!DOCTYPE html>
<html>
<head>
<style>
.descendants *
{ 
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(){
  $("div").children().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div class="descendants" style="width:500px;">div (current element) 
  <p>p (child)
    <span>span (grandchild)</span>     
  </p>
  <p>p (child)
    <span>span (grandchild)</span>
  </p> 
</div>

</body>
</html>

当然也可以传入参数进行过滤

$(document).ready(function(){
  $("div").children("p.1");
});

返回的是div的直接孩子中class=1的所有<p>元素

2.获得所有层级的孩子find()

$(document).ready(function(){
  $("div").find("*");
});

div的所有孩子

也可以进行过滤

$(document).ready(function(){
  $("div").find("span");
});

返回div所有的孩子并且是span的元素

（3）遍历兄弟节点

1.获得所有兄弟节点siblings()(当然不包括自己)

<!DOCTYPE html>
<html>
<head>
<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().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">

<div>div (parent)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>

</body>
</html>

2.获得当前节点的下一个兄弟节点next()

$(document).ready(function(){
  $("h2").next();
});

3.获得当前节点后面的所有兄弟节点nextAll()

$(document).ready(function(){
  $("h2").nextAll();
});

4.获得当前节点前面的兄弟节点prev，prevAll，prevUntil等

和之前完全一样，只不过方向向前