Question

我在寻找为什么closest()在遍历树之前找到第一个自身元素。

例如：当我点击儿童元素时，我想fadeOut父div元素，但子元素太过div所以是fadeOut

的孩子

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

你有一个具体的案例，在哪里得到它自己有用吗？

Answer 1

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

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

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

$(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元素而不是任何 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>

Answer 2

如前所述，closest()以当前元素开头。你的选择器很模糊，它停在那里。

定位特定的容器类而不是直接的祖先div可能更安全（并且更广泛有用）。

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

Answer 3

你必须更具体，当你不确定什么元素将完全接收点击（div本身，标签内部，图像或smth。其他）但你想要总是相同的动作时使用最近的（），所以最接近的可以点完全相同的元素（与父方法相反）

$(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>
1
</div>
<br>
 <div class="feed close">
   <div class="close">
    X
   </div>
2
</div>

为什么nearest（）在遍历树

3 个答案: