遍历 DOM 树并检查是否有父节点有 class

Question

我有一个 HTML DOM 对象和我 select 所有具有属性的元素：data-reveal。

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

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

我使用了其他帖子中建议的最接近的方法，但代码没有 return 任何东西。

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>

可能是我 select if 子句中的对象的错误？

Answer 1

请注意，原生 JS（非 jQuery）Element.closest() 是实验性的，并非所有浏览器都支持（尚未）。

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

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

这样做：

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

不像jQuery.closest()，原生最接近returnsnull的时候什么都找不到，并且试图找到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>

Answer 2

既然你有 jquery 作为标签，这是公平的游戏，:D 我可能会做这样的事情。

$('img').filter('[data-reveal]').each(function() {
  var $this = $(this);

  if ($this.closest('[data-conceal]').length < 1) {
    console.log(this);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="note">
    <img data-reveal="2" href="">
    <img data-reveal="3" href="">
    <img data-reveal="4" href="">
  </div>
  <div data-conceal="do it">
    <img data-reveal="5" href="">
    <img data-reveal="6" href="">
  </div>
</div>

遍历 DOM 树并检查是否有父节点有 class

Traverse DOM tree and check if any parent has class

javascript

jquery

attributes

dom

traversal