遍历 DOM 树并检查是否有任何父级有类

Question

我有一个 HTML DOM 对象，我选择了所有具有以下属性的元素：data-reveal。

var revealList = doc.querySelectorAll('[data-reveal]');

我想遍历这些元素并检查是否有具有类注释的父元素。只有当班级不在时，我才想做点什么。

我使用了其他帖子中建议的最接近的方法，但代码没有返回任何内容。

for (var i = 0; i < revealList.length; i++) {
  if (revealList[i].closest('[data-conceal]').length = 0) {
    // do something
  }
};

这是一个最小的 HTML 示例。

<div class="parent">
  <div class="note">
    <img data-reveal="2" href="">
    <img data-reveal="3" href="">
    <img data-reveal="4" href="">
  </div>
  <img data-reveal="5" href="">
  <img data-reveal="6" href="">
</div>

可能是我如何在 if 子句中选择对象的错误？

Answer 1

请注意，本机 JS（非 jQuery）Element.closest()是实验性的，并非所有浏览器都支持（目前）。

在您的代码中，您应该寻找最接近的.note. 所以而不是这个：

revealList[i].closest('[data-conceal]')

做这个：

revealList[i].closest('.note')

与 jQuery 不同.closest()，null当它没有找到任何东西时，本机最接近返回，并且试图找到的长度会null抛出错误。在尝试使用结果之前检查 null。

一个工作示例：

revealList[i].closest('[data-conceal]')

revealList[i].closest('.note')