jQueryは特定のクラス接頭辞を持つ最初の親要素を見つけます

123

特定のクラスプレフィックスを持つ最初の親を取得したいとします。

<div class="div-a3332"> 
  <div class="div-a89892">
    <p>
      <div class="div-b2">
        <div id="divid">hi</div>
      </div>
    </p>
  </div>
</div>

たとえば、現在の要素は#dividであり、クラスプレフィックスdiv-aを持つ最初の要素を見つけたいと考えています。したがって、基本的には次のように選択されます。

<div class="div-a89892">

jquery jquery-selectors

— タイムトラベル
ソース

やめる。情報を1つのクラスにまとめるのではなく、複数のクラスを使用します。「マッチング」セレクターは遅く、このデザインは変更に応じて拡張されません。<div class='a'>、次にのルールを提供しますdiv.a。なぜdivクラス名を入力するのか、実際にはわかりません。

— Stefan Kendall

それでも、データをクラスの接頭辞にマージしないでください。これはひどいパターンであり、複数のクラスで簡単に修正できます。

— Stefan Kendall

@StefanKendall：他人のサードパーティのがらくたを扱っている場合もあれば、すぐに修正できないレガシーアプリをサポートしている場合もあります。悪いデザインは現実の事実であり、これは完全に正当な質問です。

— Nerdmaster 2013

回答:

221

.closest()セレクターで使用：

var $div = $('#divid').closest('div[class^="div-a"]');

— マットボール
ソース

ところで、なぜこれが反対票だったのかはわかりません。クラス接頭セレクタは脆いですが、それはなります動作します。

— マットボール

OPの場合：探している要素がDOMツリーの上位の親であり、兄弟またはドキュメントに似ていないことを確認してください（ドキュメントに従って）。「ドキュメント内の最も近い場所」ではなく、「DOMツリーを操作して最も近い場所」です。

— クリスチャンP.

私にはうまくいきません。また、特定のプレフィックスを持つ最初の要素を見つけたいのですが、div要素である必要はありません。

— タイムトラベル

次に、@ Timeはdiv要素セレクターを削除します$('#divid').closest('[class^="div-a"]')。ただし、@ Stefanがコメントしたように、実際には複数のクラスを使用する必要があります。

— マットボール

このセレクターは、ばかげた量のサイクルを必要とします（ただし、それでも高速になる可能性があります）。IE6、IE7、またはIE8をサポートする必要がある場合、DOMが大きくなりすぎると、本当に失敗する可能性があります。IEは、特定の数のJS VM命令が実行されたときに「スクリプトが応答していません」ダイアログをスローします。これだけの理由で、0.1msでInternet Explorerをクラッシュさせるスクリプトを見てきました。

— Stefan Kendall

jqueryを使用すると、.parents()メソッドを使用して親を見つけることができます。

したがって、以下を使用することをお勧めします。

var $div = $('#divid').parents('div[class^="div-a"]');

これにより、セレクターに一致するすべての親ノードが提供されます。セレクターに一致する最初の親を取得するには、以下を使用します。

var $div = $('#divid').parents('div[class^="div-a"]').eq(0);

他のそのようなDOMトラバーサルクエリについては、DOMのトラバースに関するドキュメントをご覧ください。

— サニーRグプタ
ソース

答えは誤解を招くものではなく、.closest（）、. parents（）の別の代替案を紹介するだけで読みやすくなり、問題の別の解決策になります。

— Sunny R Gupta 2013

親は最初の一致を見つけるだけですが、親はDOMを上って行くすべての一致を見つけるため、最も近いのはこれよりも優れたソリューションです。明らかに、closestを使用する方が効率的です。

— Mog0 2014年

面白いことに、.parentsUtil（）が期待どおりに機能しなかったため、このソリューションを使用することになりました。

— Mark Handy 2016