Question

我一直在浏览有关JavaScript的MDN文档并遇到Element.closest属性。这仍然只是一个实验性的属性，但了解如何使用它非常重要。

这是规范所说的

Element.closest（）方法返回当前元素（或当前元素本身）的最接近的祖先，它与参数中给出的选择器匹配。如果没有这样的祖先，它将返回null。

https://developer.mozilla.org/en-US/docs/Web/API/Element/closest

＆＃13;

var par = document.getElementById('my-id');

par.closest("h2").style.background = "yellow";

＆＃13;

<div id="first">
  <h2>Heading</h2>
  <div id="second">
    <div id="third">    
      <p id="my-id">This is a paragraph</p>
    </div>
  </div>
</div>

＆＃13;

我使用的是最新版本的Google Chrome。根据兼容性图表，这应该适用于Google Chrome 41 +

我无法找到任何无法解决的原因。

任何理论？

Answer 1

正如您所说，此方法会返回closest ancestor，具体取决于您输入的selector。在您的情况下，h2不是#my-id的祖先，并且它也不能返回自身，因为它们不是同一类型，因此结果为null。如果您将p#my-id更改为h2#my-id，则会有效：

它在这个例子中起作用：

var par = document.getElementById('my-id');

par.closest("h2").style.background = "yellow"; //returns itself
par.closest("#first").style.color = "red";   // change color of an ancestor

<div id="first">
  <h2>Heading</h2>
  <div id="second">
    <div id="third">
      <h2 id="my-id">This is a paragraph</h2>
    </div>
  </div>
</div>

Answer 2

我一直认为伟大的叔叔是祖先。要访问标题，他们可以使用uncle selector。

您使用#closest找到您的祖父，然后使用previousElementSibling找到他的哥哥。

var par = document.getElementById('my-id');

par.closest("#second").previousElementSibling.style.background = "yellow";

<div id="first">
  <h2>Heading</h2>
  <div id="second">
    <div id="third">    
      <p id="my-id">This is a paragraph</p>
    </div>
  </div>
</div>

必须注意的是，这在IE中不起作用，仅适用于41+版本的Chrome。 Chrome 41仅在大约一年前发布。

JavaScript - Element.closest没有样式

2 个答案: