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