Traverse DOM tree and check if any parent has class

Question

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?

Answer 1

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>