DOM-Baum durchqueren und prüfen, ob ein Elternteil die Klasse

hat Ich habe ein HTML-DOM-Objekt und ich wähle alle Elemente mit dem Attribut: data-reveal aus.DOM-Baum durchqueren und prüfen, ob ein Elternteil die Klasse

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

Ich möchte diese Elemente durchlaufen und überprüfen, ob es ein Elternelement gibt, das die Klassennotiz hat. Nur wenn die Klasse nicht anwesend ist, möchte ich etwas tun.

Ich habe die nächste Methode verwendet, die in anderen Posts vorgeschlagen wird, aber der Code gibt nichts zurück.

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

Dies ist ein minimales HTML-Beispiel.

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

Ist vielleicht der Fehler, wie ich das Objekt in der If-Klausel auswählen?

Quelle

2016-11-20 TheRed

seitliche Anmerkung = 0 ist eine Zuordnung. Außerdem sollten Sie reine Attribut-Look-Ups vermeiden. Sie können sehr langsam sein, da sie jedes im Bereich verfügbare dom-Element prüfen müssen, um festzustellen, ob sie übereinstimmen. Versuchen Sie stattdessen, eine Klasse oder ID zu verwenden, oder wählen Sie eine Teilmenge von Elementen aus, bevor Sie den Attributselektor verwenden. – Taplar

Beachten Sie, dass das native JS (nicht jQuery) Element.closest() experimentell ist und (noch) nicht von allen Browsern unterstützt wird.

In Ihrem Code-Code sollten Sie nach dem nächsten .note suchen. Anstatt also diese:

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

tun:

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

Im Gegensatz zu jQuery .closest(), die nativen am nächsten kehrt null wenn er nichts finden, und zu versuchen, die Länge des null wirft einen Fehler zu finden . Überprüfen Sie auf Null, bevor Sie versuchen, das Ergebnis zu verwenden.

Ein Arbeitsbeispiel:

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>

Quelle

2016-11-20 17:24:29

Es sollte beachtet werden, dass die Methode (noch) nicht von allen Browsern unterstützt wird. – undefined

Ich bemerkte es dumpf :) –

Danke, der Hinweis auf die nächste Rückkehr Null und nicht wahr/falsch war der Schlüssel. – TheRed

Da Sie jquery als Tag haben, es ist fair Spiel: D ich wahrscheinlich so etwas tun würde.

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

Quelle

2016-11-20 17:33:24 Taplar

DOM-Baum durchqueren und prüfen, ob ein Elternteil die Klasse

Antwort

Verwandte Themen