如何获取一个深层子元素的父元素？

19 浏览
0 Comments

如何获取一个深层子元素的父元素？

我有一个类似HTML的代码 -

注意，这里有一个class为click_here的span元素。所以，如果用户点击这个span元素，我想通过Javascript获取它的class为parent的祖父元素。

我知道基本的解决方案，比如访问e.parentElement.parentElement.parentElement.parentElement，但这种方法不好，因为点击的项目可能比示例中给出的更深层级。

是否有其他使用Javascript的解决方案？

0

2 答案

0 Comments

如何获取深层子元素的父元素？

有时候我们需要获取一个深层子元素的父元素，但是直接从子元素获取父元素并不是一件容易的事情。下面给出了解决这个问题的方法。

一个解决方法是使用e.target.closest('.parent')，它能够选择最接近的满足指定选择器条件的父元素。通过这种方式，我们可以轻松地获取到深层子元素的父元素。

以上就是如何获取深层子元素的父元素的解决方法。

代码示例：

e.target.closest('.parent')

希望这篇文章对你理解如何获取深层子元素的父元素有所帮助！

0
0 Comments

如何获取深层子元素的父元素？

问题原因：当需要获取一个深层子元素的父元素时，直接使用父元素的选择器可能会受到嵌套层级的限制。因此，需要一种方法来获取任意嵌套层级的父元素。

解决方法：可以使用mouseEvent.target.closest('.parent');来获取被点击元素最近的.parent元素，这种方法适用于任意嵌套层级。示例代码如下：

let span = document.querySelector('span');
span.addEventListener('click', function(e) {
	console.log(e.target.closest('.parent'));
});

以上代码中，当点击元素时，会打印出最近的.parent元素。

为了更好地理解该方法，我们还提供了相应的HTML和CSS代码：

span {
	display: block;
	width: 100px;
	height: 100px;
	background: tomato;
}


<main>
<section>
  <div class="parent">
    <div class='level_1'>
      <div class='level_2'>
        <div class='level_3'>
          <span class='click_here'></span>
        </div><!--level 3-->
      </div><!--level 2-->
    </div> <!--level 1-->
  </div> <!--parent-->
<section>
<section>
  <!-- same as given above -->
<section>
<main>

在上述HTML代码中，有一个嵌套层级较深的元素，我们希望获取它的最近的.parent元素。

通过使用mouseEvent.target.closest('.parent');方法，我们可以轻松地获取到该元素的父元素，无论嵌套层级多深。

以上就是解决该问题的方法和相关代码。使用mouseEvent.target.closest('.parent');方法可以方便地获取深层子元素的父元素，而不受嵌套层级的限制。

0