javascript - 为什么 closest() 在遍历树之前首先找到它自己的元素

Question

我在寻找为什么 closest() 在遍历树之前首先找到它自己的元素。

例如:当我点击子元素时，我想要 fadeOut 父 div 元素，但是子元素太 div 和 fadeOut

的 child 也是

$(document).on("click", ".close", function() {
  $(this).closest("div").fadeOut();
});

.feed {
  width: 200px;
  height: 200px;
  background: red;
  position: relative;
}
.close {
  position: absolute;
  top: 0;
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="feed">
  <div class="close">
    X
  </div>
</div>

为什么fadeOut本身是元素而没有父div元素？

我知道 parent() 获取父元素，但是 closest() 应该遍历元素树。

您是否有具体的案例，其中 get 本身很有用？

Answer 1

这是因为.closest() method从当前元素开始遍历 DOM。您可能需要 .parents() method相反，因为它将从父元素开始。

$(this).parents("div").fadeOut();

值得注意的是，.parents() 方法返回零个或多个元素，而 .closest() 将返回零个或一个元素。因此，您可能希望在 .parents() 方法之后链接 .first() 以获得第一个匹配项:

$(this).parents("div").first().fadeOut();

$(document).on("click", ".close", function() {
  $(this).parents("div").first().fadeOut();
});

.feed {
  width: 200px;
  height: 200px;
  background: red;
  position: relative;
}
.close {
  position: absolute;
  top: 0;
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="feed">
  <div class="close">
    X
  </div>
</div>

或者，您也可以通过选择父元素来排除父元素，然后然后使用.closest()，例如:

$(this).parent().closest("div").fadeOut();

但是，最好只选择最接近的 .feed 元素而不是 any div:

$(this).closest(".feed").fadeOut();

$(document).on("click", ".close", function() {
  $(this).closest(".feed").fadeOut();
});

.feed {
  width: 200px;
  height: 200px;
  background: red;
  position: relative;
}
.close {
  position: absolute;
  top: 0;
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="feed">
  <div class="close">
    X
  </div>
</div>