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

Question

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

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

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

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

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

在您的代码中，您应该寻找最接近的 .note 。所以代替这个:

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

这样做:

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

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

一个工作示例:

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

for (var i = 0; i < revealList.length; i++) {
  note = revealList[i].closest('.note'); // find the closest

  if (note !== null) { // if it's not null do something
    alert('note');
  }
};

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