I have an HTML DOM object and I select all elements with the attribute: data-reveal.

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

I would like to iterate through these elements and check, if there is a parent element that has the class note. Only if the class is not present I want to do something.

I have used the closest method, suggested in other posts, but the code does not return anything.

for (var i = 0; i < revealList.length; i++) {
  if (revealList[i].closest('[data-conceal]').length = 0) {
    // do something
  }
};

This is a minimal HTML example.

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

Is maybe the error in how I select the object in the if clause?

I have an HTML DOM object and I select all elements with the attribute: data-reveal.

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

I would like to iterate through these elements and check, if there is a parent element that has the class note. Only if the class is not present I want to do something.

I have used the closest method, suggested in other posts, but the code does not return anything.

for (var i = 0; i < revealList.length; i++) {
  if (revealList[i].closest('[data-conceal]').length = 0) {
    // do something
  }
};

This is a minimal HTML example.

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

Is maybe the error in how I select the object in the if clause?

• javascript
• jquery
• dom
• attributes
• traversal

• 1 side note, = 0 is an assignment. Also as an aside, you should avoid pure attribute look ups. They can be super slow as they have to check every dom element available in the scope to see if they match. Try to use a class or id instead, or select a subset of elements before using your attribute selector. – Taplar Commented Nov 20, 2016 at 17:24
• similar: stackoverflow./q/16863917 – djvg Commented Mar 20, 2023 at 10:46

2 Answers 2

In your code code you should look for the closest .note. So instead of this:

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

Do this:

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

Unlike jQuery .closest(), the native closest returns null when it doesn't find anything, and trying to find the length of null throws an error. Check for null before trying to use the result.

A working example:

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>

Since you have jquery as a tag, it's fair game, :D I'd probably do something like this.

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

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

<script src="https://ajax.googleapis./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>