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

我有一个HTML DOM对象，并选择具有以下属性的所有元素：data-reveal。遍历DOM树并检查是否有父类有

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语句中的对象的错误？

来源

2016-11-20 TheRed

侧面说明，= 0是一个赋值。另外，您应该避免纯属性查找。他们可能会超慢，因为他们必须检查范围中可用的每个dom元素，以查看它们是否匹配。尝试使用类或ID，或者在使用属性选择器之前选择元素的子集。 – Taplar

请注意，原生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>

来源

2016-11-20 17:24:29

应该指出的是，该方法并未被所有浏览器支持（尚未）。 – undefined

我dully注意到它:) –

谢谢，关于最接近的返回null和不是真/假的提示是关键。 – TheRed

既然你有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>

来源

2016-11-20 17:33:24 Taplar

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

回答

相关问题