Jquery获取元素的父容器对象示例代码

获取元素的上一级父容器是在网页开发中经常使用的操作之一。在jQuery中，可以通过如下方式获取元素的父容器对象：

$(selector).parent();

其中，selector表示要获取父容器的元素选择器，返回的是该元素直接上一级的父容器对象。

例如，我们可以通过以下代码获取div元素的父容器对象：

$("div").parent();

上述代码中的div表示要获取的元素是所有div元素。执行后，返回的是所有div元素的直接上一级父容器对象。

除了.parent()方法，还有一些其他的方法也可以用来获取元素的父容器对象，这里列举一下：

• .parents()方法：该方法可以获取元素所有的父容器对象，包括所有上级父容器，可以传递参数来只获取指定级别的父容器对象。
• .parentUntil()方法：该方法可以选择性地获取元素与指定元素之间的所有父容器对象。

接下来，我们通过两个示例来说明如何使用.parent()方法获取元素的父容器对象。

1. 获取元素的直接上一级父容器对象

下面是一个例子，我们通过.parent()方法来获取div元素的直接上一级父容器对象：

<div class="container">
  <div class="box">
    <p>这是p标签的文本</p>
  </div>
</div>

$(function(){
  // 获取class为box的元素的直接上一级父容器对象
  var container = $(".box").parent();
  console.log(container.attr("class")); // 输出container
});

上述代码中，我们首先使用$函数来获取DOM元素，然后使用.parent()方法来获取其直接上一级的父容器对象div.container，最后用.attr()方法获取该父容器对象的class属性值。

1. 获取元素的多个上级父容器对象

下面是一个例子，我们通过.parents()方法来获取p元素的所有父容器对象：

<div class="container">
  <div class="box">
    <p>这是p标签的文本</p>
  </div>
</div>

$(function(){
  // 获取p元素的所有父容器对象
  var containers = $("p").parents();
  for(var i=0; i<containers.length; i++){
    console.log(containers.eq(i).attr("class")); 
  }
  // 输出 box  container
});

上述代码中，我们首先使用$函数来获取DOM元素，然后使用.parents()方法来获取其所有上级父容器对象，最后使用.eq()方法获取每个父容器对象的属性值，并进行遍历输出。