Vérifiez si un ancêtre a une classe en utilisant jQuery

156

Y a-t-il un moyen dans jQuery de vérifier si un parent, un grand-parent, un arrière-grand-parent a une classe.

J'ai une structure de balisage qui m'a laissé faire ce genre de chose dans le code:

$(elem).parent().parent().parent().parent().hasClass('left')

Cependant, pour la lisibilité du code, j'aimerais éviter ce genre de chose. Y a-t-il un moyen de dire «un parent / grand-parent / arrière-grand-parent a cette classe»?

J'utilise jQuery 1.7.2.

— crmpicco
source

stackoverflow.com/questions/16863917/… - au cas où quelqu'un voudrait le faire sans jQuery

— Robert Niestroj

Réponses:

304

if ($elem.parents('.left').length) {

}

— Alex
source

Merci, juste ce dont j'avais besoin! Pour mémoire, alors que la pratique de traiter .lengthcomme une valeur de vérité est assez prolifique dans JS, elle est beaucoup plus claire et plus facile à comprendre.length > 0

— dooleyo

Voici le lien vers jQuery .parents () Documentation

— H Dog

Il existe de nombreuses façons de filtrer les ancêtres des éléments.

if ($elem.closest('.parentClass').length /* > 0*/) {/*...*/}
if ($elem.parents('.parentClass').length /* > 0*/) {/*...*/}
if ($elem.parents().hasClass('parentClass')) {/*...*/}
if ($('.parentClass').has($elem).length /* > 0*/) {/*...*/}
if ($elem.is('.parentClass *')) {/*...*/}

Attention , la closest() méthode inclut l'élément lui-même lors de la vérification du sélecteur.

Sinon, si vous avez un sélecteur unique correspondant à $elem, par exemple #myElem, vous pouvez utiliser:

if ($('.parentClass:has(#myElem)').length /* > 0*/) {/*...*/}
if(document.querySelector('.parentClass #myElem')) {/*...*/}

Si vous souhaitez faire correspondre un élément en fonction de l'une de ses classes ancêtres à des fins de style uniquement, utilisez simplement une règle CSS :

.parentClass #myElem { /* CSS property set */ }

— A. Wolff
source

Je pourrais me permettre de dire (sans tester cela) que cette méthode est meilleure. Elem.parents traversera toute la strucutre du dom parent, où le plus proche () devrait (probablement) s'arrêter une fois qu'il trouve le parent le plus proche avec cet élément et est donc plus efficace. Ceci est une supposition sans instruction. J'utilise généralement le plus proche (). On dirait que j'ai trouvé un nouveau sujet à rechercher pour mon blog! : P

— dudewad

@dudewad oui c'est mais c'est assez récent. Je veux dire dans l'ancienne version de jq, AFAIK, ce n'était pas le cas. La boucle des parents n'était pas interrompue sur le premier parent apparié en utilisant le plus proche (), mais c'est maintenant le cas. (je ne sais pas depuis quelle version de jq mais je suis sûr d'avoir raison sur cette déclaration)

— A. Wolff

Bon à savoir, merci pour l'info. Bizarre qu'ils n'aient pas intégré le break depuis la première version.

— dudewad

quand il n'y a pas de parents à trouver, parents () est plus rapide que le plus proche () jsperf.com/closest-vs-parents-foobar

— Alex

@Alex Assez interressant en effet, merci pour l'entrée! BTW, relisant la question, Is there any way in jQuery to check if any parent,..., closest()chèque élément lui - même si ce n'est pas question vraiment la réponse, OP pourrait vouloir exclure explecitely l'élément lui - même, donc ya, réponse était d'utiliser.parents()

— A. Wolff

Vous pouvez utiliser la parentsméthode avec le .classsélecteur spécifié et vérifier si l'un d'eux correspond:

if ($elem.parents('.left').length != 0) {
    //someone has this class
}

— Igor Dymov
source