javascript - 祖先に jQuery を使用したクラスがあるかどうかを確認する

Question

親、祖父母、曾祖父母にクラスがあるかどうかをjQueryで確認する方法はありますか。

コードでこのようなことをしているマークアップ構造があります。

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

ただし、コードを読みやすくするために、このようなことは避けたいと思います。「親/祖父母/曽祖父母がこのクラスを持っている」と言う方法はありますか?

jQuery 1.7.2 を使用しています。

Answer 1

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

}

Answer 2

要素の祖先をフィルター処理する方法は多数あります。

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

注意してください。closest() メソッドには、セレクターのチェック中に要素自体が含まれます。

または、たとえばに一致する一意のセレクターがある場合は、次を使用できます。$elem#myElem

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

スタイリングのみを目的として、祖先クラスのいずれかに依存する要素を一致させたい場合は、CSS ルールを使用します。

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

Answer 3

指定されたセレクターでparentsメソッドを使用し、それらのいずれかがそれに一致するかどうかを確認できます。.class

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