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()是实验性的，并且尚未得到所有浏览器的支持。

在您的代码中，您应该查找最接近的O(n)。所以不要这样：

.note

这样做：

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

与jQuery revealList[i].closest('.note')不同，当它找不到任何内容时，原始最接近的返回.closest()，并且尝试查找null的长度会引发错误。在尝试使用结果之前检查null。

一个工作示例：

＆＃13;

null

＆＃13;

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');
  }
};

＆＃13;

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树并检查是否有父类具有类

2 个答案: