web-dev-qa-db-fra.com

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

Existe-t-il un moyen dans jQuery de vérifier si any parent, grand-parent, 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 "n'importe quel parent/grand-parent/arrière-grand-parent a cette classe"?

J'utilise jQuery 1.7.2.

javascriptjqueryhtmljquery-selectorsjquery-1.7
134
crmpicco
if ($elem.parents('.left').length) {

}
270
Alex

Il existe de nombreuses façons de filtrer les ancêtres d'é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, closest() cette méthode inclut l'élément lui-même lors de la recherche du sélecteur.

Si vous avez un sélecteur unique correspondant au $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 dépendant de sa classe ancêtre à des fins de style uniquement, utilisez une règle CSS :

.parentClass #myElem { /* CSS property set */ }
71
A. Wolff

Vous pouvez utiliser la méthode parents avec le sélecteur spécifié .class et vérifier si l'un d'entre eux lui correspond:

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