Jquery的parent和closet方法

转载于 2020-01-10 14:31:36 发布 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/WuLex

Jquery及其组件专栏收录该内容

147 篇文章

订阅专栏

本文深入讲解jQuery中的遍历方法，包括closest(), parent(), parents(), parentsUntil()等，演示如何使用这些方法来查找DOM树中的元素及其祖先。通过具体示例，帮助读者理解不同方法的应用场景和区别。

jQuery 遍历 - closest() 方法

<!DOCTYPE html>
<html>
 <head> 
  <script type="text/javascript" src="/jquery/jquery.js"></script> 
  <style>
  li { margin: 3px; padding: 3px; background: #EEEEEE; }
  li.hilight { background: yellow; }
</style> 
 </head> 
 <body> 
  <ul> 
   <li><b>Click me!</b></li> 
   <li>You can also <b>Click me!</b></li> 
  </ul> 
  <script>
  $(document).bind("click", function( e ) {
    $(e.target).closest("li").toggleClass("hilight");
  });
</script>   
 </body>
</html>

定义和用法

closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。

语法

.closest(selector)

参数	描述
selector	字符串值，包含匹配元素的选择器表达式。

详细说明

如果给定表示 DOM 元素集合的 jQuery 对象，.closest() 方法允许我们检索 DOM 树中的这些元素以及它们的祖先元素，并用匹配元素构造新的 jQuery 对象。.parents() 和 .closest() 方法类似，它们都沿 DOM 树向上遍历。两者之间的差异尽管微妙，却很重要：

.closest()	.parents()
从当前元素开始	从父元素开始
沿 DOM 树向上遍历，直到找到已应用选择器的一个匹配为止。	沿 DOM 树向上遍历，直到文档的根元素为止，将每个祖先元素添加到一个临时的集合；如果应用了选择器，则会基于该选择器对这个集合进行筛选。
返回包含零个或一个元素的 jQuery 对象	返回包含零个、一个或多个元素的 jQuery 对象

请看下面的 HTML 片段：

<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" class="item-ii">II
  <ul class="level-2">
    <li class="item-a">A</li>
    <li class="item-b">B
      <ul class="level-3">
        <li class="item-1">1</li>
        <li class="item-2">2</li>
        <li class="item-3">3</li>
      </ul>
    </li>
    <li class="item-c">C</li>
  </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

例子 1

假设我们执行一个从项目 A 开始的对 <ul> 元素的搜索：

<!DOCTYPE html>
<html>
 <head> 
  <script type="text/javascript" src="/jquery/jquery.js"></script> 
 </head> 
 <body> 
  <ul id="one" class="level-1"> 
   <li class="item-i">I</li> 
   <li id="ii" class="item-ii">II 
    <ul class="level-2"> 
     <li class="item-a">A</li> 
     <li class="item-b">B 
      <ul class="level-3"> 
       <li class="item-1">1</li> 
       <li class="item-2">2</li> 
       <li class="item-3">3</li> 
      </ul> </li> 
     <li class="item-c">C</li> 
    </ul> </li> 
   <li class="item-iii">III</li> 
  </ul> 
  <script>
$('li.item-a').closest('ul').css('background-color', 'red');
</script>  
 </body>
</html>

这会改变 level-2 <ul> 的颜色，这是因为当向上遍历 DOM 树时会第一个遇到该元素。
在这里插入图片描述
例子 2
假设我们搜索的是 <li> 元素：

<!DOCTYPE html>
<html>
 <head> 
  <script type="text/javascript" src="/jquery/jquery.js"></script> 
 </head> 
 <body> 
  <ul id="one" class="level-1"> 
   <li class="item-i">I</li> 
   <li id="ii" class="item-ii">II 
    <ul class="level-2"> 
     <li class="item-a">A</li> 
     <li class="item-b">B 
      <ul class="level-3"> 
       <li class="item-1">1</li> 
       <li class="item-2">2</li> 
       <li class="item-3">3</li> 
      </ul> </li> 
     <li class="item-c">C</li> 
    </ul> </li> 
   <li class="item-iii">III</li> 
  </ul> 
  <script>
$('li.item-a').closest('li').css('background-color', 'red');
</script>  
 </body>
</html>

这会改变列表项目 A 的颜色。在向上遍历 DOM 树之前，.closest() 方法会从 li 元素本身开始搜索，直到选择器匹配项目 A 为止。

在这里插入图片描述

例子 3

我们可以传递 DOM 元素作为 context，在其中搜索最接近的元素。

<!DOCTYPE html>
<html>
 <head> 
  <script type="text/javascript" src="/jquery/jquery.js"></script> 
 </head> 
 <body> 
  <ul id="one" class="level-1"> 
   <li class="item-i">I</li> 
   <li id="ii" class="item-ii">II 
    <ul class="level-2"> 
     <li class="item-a">A</li> 
     <li class="item-b">B 
      <ul class="level-3"> 
       <li class="item-1">1</li> 
       <li class="item-2">2</li> 
       <li class="item-3">3</li> 
      </ul> </li> 
     <li class="item-c">C</li> 
    </ul> </li> 
   <li class="item-iii">III</li> 
  </ul> 
  <script>
var listItemII = document.getElementById('ii');
$('li.item-a').closest('ul', listItemII).css('background-color', 'red');
$('li.item-a').closest('#one', listItemII).css('background-color', 'green');
</script>   
 </body>
</html>

以上代码会改变 level-2 <ul> 的颜色，因为它既是列表项 A 的第一个 <ul> 祖先，同时也是列表项 II 的后代。它不会改变 level-1

的颜色，因为它不是 list item II 的后代。

jQuery 遍历 - 祖先

祖先是父、祖父或曾祖父等等。

通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。

向上遍历 DOM 树

这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：

parent()
parents()
parentsUntil()

jQuery parent() 方法

parent() 方法返回被选元素的直接父元素。

该方法只会向上一级对 DOM 树进行遍历。

下面的例子返回每个 <span> 元素的的直接父元素：

实例

<!DOCTYPE html>
<html>
<head>
<style>
.ancestors *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.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 (曾祖父)
    <ul>ul (祖父)  
      <li>li (直接父)
        <span>span</span>
      </li>
    </ul>   
  </div>

  <div style="width:500px;">div (祖父)   
    <p>p (直接父)
        <span>span</span>
      </p> 
  </div>
</div>

</body>
</html>

亲自试一试

jQuery parents() 方法

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

下面的例子返回所有 <span> 元素的所有祖先：
实例

<!DOCTYPE html>
<html>
<head>
<style>
.ancestors *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("span").parents().css({"color":"red","border":"2px solid red"});
});
</script>
</head>

<body class="ancestors">body (曾曾祖父)
  <div style="width:500px;">div (曾祖父)
    <ul>ul (祖父)  
      <li>li (直接父)
        <span>span</span>
      </li>
    </ul>   
  </div>
</body>

<!-- 最外围的红色边框，在 body 元素之前，是 html 元素（也是祖先）。 -->
</html>

在这里插入图片描述
您也可以使用可选参数来过滤对祖先元素的搜索。

下面的例子返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：
实例

<!DOCTYPE html>
<html>
<head>
<style>
.ancestors *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("span").parents("ul").css({"color":"red","border":"2px solid red"});
});
</script>
</head>

<body class="ancestors">body (曾曾祖父)
  <div style="width:500px;">div (曾祖父)
    <ul>ul (祖父)  
      <li>li (直接父)
        <span>span</span>
      </li>
    </ul>   
  </div>
</body>

</html>

在这里插入图片描述

jQuery parentsUntil() 方法

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：

实例

<!DOCTYPE html>
<html>
<head>
<style>
.ancestors *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
});
</script>
</head>

<body class="ancestors"> body (曾曾祖父)
  <div style="width:500px;">div (曾祖父)
    <ul>ul (祖父)  
      <li>li (直接父)
        <span>span</span>
      </li>
    </ul>   
  </div>
</body>

</html>

在这里插入图片描述

jquery DOM 父节点、祖先节点、子节点、子孙节点

一、获取父节点、祖先节点：

parents([selector])
本方法用于选择给定 jQuery 对象中包含的 DOM 元素或者 DOM 元素集的祖先节点，并将这些节点包装成 jQuery 对象返回，返回的节点集是以从里到外的顺序排序的。同时，本方法还接受一个字符串选择器，用于从返回的节点集中筛选符合选择器的子元素集。
parent([selector])
本方法用于选择给定 jQuery 对象中包含的 DOM 元素或者 DOM 元素集的父节点。它和 parents() 不同的是，它只向上搜索一层，而 parents() 会搜索整个 DOM 树。本方法也可以接受一个字符串选择器，用于筛选返回的元素。
有人可能会问：一个 DOM 元素的父元素不是只有一个么，为什么还要一个 selector 选择器进行筛选呢？其实一个 jQuery 对象可能包含有很多个 DOM 元素，例如$('a').parent() 就是选择所有 <a> 标签的父元素，这样返回的就是一个元素集，所以可以进行筛选。
closest(selector)
本方法用于向上遍历 jQuery 对象中包含的 DOM 元素或者 DOM 元素集的祖先节点，直到找到符合 selector 选择器的节点为止。

二、获取子节点、子孙节点：

chidren([selector])
仅仅获取的是下级节点，不包括孙子节点，可用选择器选取。
find([selector])
搜索所有段落中的后代，可用选择器获取。

jquery获取父元素及祖先元素

parent是找当前元素的第一个父节点，parents是找当前元素的所有父节点

先说一下parent和parents的区别

从字面上不难看出

parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合。

parents则是取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的

表达式进行筛选。

可以看出parent的取值很明确，就是当前元素的父元素；parents则是当前元素的祖先元素。下面列出例子

说明：

<div id='div1'>

<div id='div2'><p></p></div>

<div id='div3' class='a'><p></p></div>

<div id='div4'><p></p></div>

</div>

$('p').parent()取到的是div2,div3,div4

$('p').parent('.a')取到的是div3

$('p').parent().parent()取到的是div1，这点比较奇特；不过Jquery对象本身的特点决定了这是可行的

。

$('p').parents()取到的是div1,div2,div3,div4

$('p').parents('.a')取到的是div3

parent(exp)用法:取得一个包含着所有匹配元素的唯一父元素的元素集合。

<script src="jquery-1.2.6.min.js" type="text/javascript"></script>

<script type="text/javascript"> 

    $(document).ready(function() {

        $("#btn1").click(function(){

        alert($(this).parent().next().html());

       });

    });
</script>