Überprüfen Sie, ob die Klasse irgendwo in Eltern existiert - Vanille JS

Question

Ich habe wirklich Mühe zu sehen, wie dies zu tun ist. Ich möchte überprüfen, ob eine Klasse irgendwo in einem der Elternelemente eines Elements vorhanden ist.

Ich möchte keine Bibliothek verwenden, nur Vanille JS.

In den folgenden Beispielen sollte true zurückgegeben werden, wenn sich das fragliche Element irgendwo in den childs eines Elements mit der Klasse "the-class" befindet.

denke ich, es so etwas wie dies mit jQuery wäre:

if($('#the-element').parents().hasClass('the-class')) { 
    return true; 
} 

Also das gibt true zurück:

<div> 
    <div class="the-class"> 
     <div id="the-element"></div> 
    </div> 
</div> 

So tut dies:

<div class="the-class"> 
    <div> 
     <div id="the-element"></div> 
    </div> 
</div> 

... aber das gibt false zurück:

<div> 
    <div class="the-class"> 
    </div> 
    <div id="the-element"></div> 
</div> 

Answer 1

Sie werden es rekursiv zu tun haben:

// returns true if the element or one of its parents has the class classname 
function hasSomeParentTheClass(element, classname) { 
    if (element.className.split(' ').indexOf(classname)>=0) return true; 
    return element.parentNode && hasSomeParentTheClass(element.parentNode, classname); 
} 

Demonstration (die Konsole öffnen true zu sehen)

Answer 2

Die fiddle

Der Code

function hasClass(element, className) { 
    var regex = new RegExp('\\b' + className + '\\b'); 
    do { 
    if (regex.exec(element.className)) { 
     return true; 
    } 
    element = element.parentNode; 
    } while (element); 
    return false; 
} 

OR

function hasClass(element, className) { 
    do { 
    if (element.classList && element.classList.contains(className)) { 
     return true; 
    } 
    element = element.parentNode; 
    } while (element); 
    return false; 
} 

Answer 3

Ich glaube, if($('#the-element').parents('.the-class').length) effizienter zu sein, aber vielleicht nicht so gut lesbar; , die mit querySelector im Bild, könnte mit dem folgende Verfahren ersetzt:

function hasParent(element, parentSelector) { 
    var potentialParents = document.querySelectorAll(parentSelector); 
    for(i in potentialParents) if(potentialParents[i].contains(element)) 
     return potentialParents[i]; 
    return false; 
} 

Das würden Sie die Möglichkeit, zu tun:

var elm = document.getElementById('the-element'); 
if(hasParent(elm, '.the-class')) return true; 

Answer 4

Da ID muss eindeutig sein auf Dokumentkontext, Sie verwenden könnte nur statt:

return !!document.querySelector('.the-class #the-element'); 

Wenn Sie Element selbst aufnehmen möchten, können Sie verwenden:

return !!document.querySelector('.the-class #the-element, #the-element.the-class'); 

Answer 5

Mein Beispiel für Vanilla JS, dann ist es

var htmlElement = <htmlElement>, 
    parents = [], 
    classExist; 
while (htmlElement = htmlElement.parentNode.closest(<parentSelector>)) { 
    parents.push(htmlElement); 
} 
classExist = (parents > 0); 

So Ihre Wähler ein .className

zu sein nur ein Vanille-Äquivalent parents() von jQuery verwenden und nur überprüfen, ob Eltern> 0

Answer 6

Ich bin ok mit der Funktion, die Denys Séguret gepostet hat, sieht es elegant aus und ich mag es. Ich habe nur ein bisschen diese Funktion optimiert, da, wenn die im Parameter angegebene Klasse nicht im gesamten DOM vorhanden ist, es fehlschlägt, wenn die Rekursion das Dokumentobjekt erreicht, weil es wahr ist, dass wir kontrollieren, ob das Element den Elternknoten hat die letzte Zeile, und wenn das Dokument das Element ist der Elternknoten ist Null), aber bevor wir die vorherige Zeile ausführen, und wenn das Element das Dokument ist document.className ist undefined und es schlägt fehl, also muss das Steuerelement an die Spitze verschoben werden.

function hasSomeParentTheClass(element, classname) { 
    // 
    // If we are here we didn't find the searched class in any parents node 
    // 
    if (!element.parentNode) return false; 
    // 
    // If the current node has the class return true, otherwise we will search 
    // it in the parent node 
    // 
    if (element.className.split(' ').indexOf(classname)>=0) return true; 
    return hasSomeParentTheClass(element.parentNode, classname); 
} 

Answer 7

Sie some verwenden können und contains das Ergebnis zu erreichen:

function hasParentWithMatchingSelector (target, className) { 
    return [...document.querySelectorAll(className)].some(el => 
    el !== target && el.contains(target) 
) 
} 

// usage 
hasParentWithMatchingSelector(myElement, '.some-class-name'); 

Answer 8

Hier ist eine einfache genug Lösung

if ($elem.parents('.the-class').length) { 
    return true 
}