CODEWITHSUNDEEP
javascriptjquerydomattributestraversal
TheRed
TheRed

Reputation: 327

Traverse DOM tree and check if any parent has class

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?

Upvotes: 4

Views: 2484

Answers (2)

Ori Drori
Ori Drori

Reputation: 191946

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>

Upvotes: 7

Taplar
Taplar

Reputation: 24965

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

Upvotes: 0

Related Questions