web-dev-qa-db-ja.com

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

JQueryにany parent、grand-parent、great-grand-parentにクラスがあるかどうかを確認する方法はありますか？.

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

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

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

JQuery 1.7.2を使用しています。

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

}
261
Alex

要素の祖先をフィルタリングするには多くの方法があります。

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 */ }
69
A. Wolff

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

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