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.


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

Réponses:


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

}

19
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

2
Voici le lien vers jQuery .parents () Documentation
H Dog

75

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 */ }

2
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

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

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

7

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
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.