遍历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。

一个工作示例：

 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>