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

156

jQueryに親、祖父母、偉大な祖父母がクラスを持っているかどうかを確認する方法はありますか？

私はコードでこの種のことをやらせているマークアップ構造を持っています：

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

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

jQuery 1.7.2を使用しています。

— Crmpicco
ソース

stackoverflow.com/questions/16863917/…-誰かがjQueryなしでそれを実行したい場合

— Robert Niestroj

回答:

304

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

}

— アレックス
ソース

ありがとう、必要なものだけを！記録のために、.length真理値として扱う慣行はJSでかなり多作ですが、それははるかに明確で理解しやすいです.length > 0

— dooleyo

ここではjQueryのへのリンクです）（.parentsドキュメントは

— H犬

要素の祖先をフィルタリングする方法はたくさんあります。

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

— A.ウォルフ
ソース

（これをテストせずに）この方法の方が良いと言ってみてください。Elem.parentsは親dom構造全体をトラバースします。closet（）は、その要素を持つ最も近い親を見つけると（おそらく）停止し、より効率的になります。これは教育を受けていない推測です。私は通常、closest（）を使用します。ブログのリサーチに新しいトピックを見つけたようです。：P

— dudewad 2014年

@dudewadはい、そうですが、かなり最近のことです。以前のjqバージョンのAFAIKでは、これは当てはまりませんでした。親のループは、closest（）を使用して最初に一致した親で中断しませんでしたが、現在は中断しています。（どのjqバージョンかわからないが、このステートメントについては間違いなく正しいと思う）

— A. Wolff

知っておくと良い、情報をありがとう。彼らが最初のバージョンからブレークインを組み込んでいなかったのは奇妙だ。

— dudewad 2014年

親が見つからない場合、parents（）は、closest（）よりも高速ですjsperf.com/closest-vs-parents-foobar

— Alex

@Alexかなり興味深い、入力用thx！ところで、再読み込み質問、Is there any way in jQuery to check if any parent,...、closest()要素自体のチェックこれは本当に質問に答えるされていないので、OP屋、答えは使用していたのでexplecitely、要素自体を除外するために望むことができる.parents()

— A.ウォルフ

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

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

— イゴール・ディモフ
ソース