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

Question

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

J'ai une structure de balisage qui m'a amené à faire ce genre de choses dans le code :

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

Cependant, pour la lisibilité du code, j'aimerais éviter ce genre de choses. Existe-t-il un moyen de dire "tout parent/grand-parent/arrière-grand-parent possède cette classe" ?

J'utilise jQuery 1.7.2.

Answer 1

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

}

Answer 2

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 *')) {/*...*/} 

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

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

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

Si vous voulez faire correspondre un élément à n'importe quelle classe de son ancêtre à des fins de stylisme uniquement, il suffit d'utiliser un élément de type Règle CSS :

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

Answer 3

Vous pouvez utiliser parents avec la méthode spécifiée .class et vérifiez si l'un d'entre eux y correspond :

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