Traverse l'arborescence DOM et vérifie si un parent a une classe

J'ai un objet DOM HTML et je sélectionne tous les éléments avec l'attribut: data-reveal. Je voudrais parcourir ces éléments et vérifier s'il y a un élément parent qui a la note de classe. Seulement si la classe n'est pas présente, je veux faire quelque chose.Traverse l'arborescence DOM et vérifie si un parent a une classe

J'ai utilisé la méthode la plus proche, a suggéré dans d'autres postes, mais le code ne retourne rien.

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

Ceci est un exemple HTML minimal.

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

Est-ce peut-être l'erreur dans la façon dont je sélectionne l'objet dans la clause if?

Source

2016-11-20 TheRed

note côté, = 0 est une mission. Aussi, en aparté, vous devriez éviter les recherches d'attributs purs. Ils peuvent être très lents car ils doivent vérifier chaque élément dom disponible dans la portée pour voir s'ils correspondent. Essayez plutôt d'utiliser une classe ou un ID, ou sélectionnez un sous-ensemble d'éléments avant d'utiliser votre sélecteur d'attribut. – Taplar

Notez que les JS natifs (non jQuery) Element.closest() est expérimental et non pris en charge par tous les navigateurs (encore).

Dans votre code, vous devriez chercher le plus proche .note. Ainsi, au lieu de cela:

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

Faites ceci:

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

Contrairement jQuery .closest(), les rendements les plus proches natifs null quand il ne trouve rien, et en essayant de trouver la longueur de null renvoie une erreur . Vérifiez null avant d'essayer d'utiliser le résultat.

Un exemple de réalisation:

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>

Source

2016-11-20 17:24:29

Il est à noter que la méthode n'est pas encore supportée par tous les navigateurs. – undefined

Je l'ai dully noté :) –

Merci, l'indice sur le retour le plus proche null et pas vrai/faux était la clé. – TheRed

Puisque vous avez jquery une étiquette, il est un jeu équitable,: D je serais probablement faire quelque chose comme ça.

$('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>

Source

2016-11-20 17:33:24 Taplar

Traverse l'arborescence DOM et vérifie si un parent a une classe

Répondre

Questions connexes