web-dev-qa-db-ja.com

JQueryセレクター：特定のクラス*および* IDを持つアイテムを選択する方法

特定のクラスとIDを持つページ上のHTML要素を選択しようとしています。タグは次のとおりです。

<div class="statusLight" id="green"></div>

私は運が悪かったのでこれを試しました：

$statusLight = $('.statusLight#green');

私は簡単に言うことができることを知っています

$statusLight = $('#green');

しかし、私はそのクラスにも基づいてそれを選択する方法を見つけようとしていました。どんな助けでもいただければ幸いです。

jqueryjquery-selectorscss-selectors
13
BAHDev

_#green.statusLight_と_.statusLight#green_はどちらも有効なセレクターであり、探している要素を選択する必要があります。ただし、最初の方が高速になります。

ドキュメントが読み込まれた後、つまり$(...)から、または要素の後にスクリプトを配置することによって、$(document).ready(function() { ... })を使用していますか？

18
Peter Štibraný

なぜあなたがこれをしたいのか完全にはわかりません。

IDは一意である必要があるため、IDを選択するときに、それ以上の特殊化は必要ありません。そうでない場合は、HTMLを変更して変更する必要があります。

このシナリオは、クラスセレクターと要素セレクターを組み合わせている場合にのみ意味があります。

$("div.statuslight")

しかし、あなたの例では、とにかくIDを持っているので、意味がありません。

11
James Wiseman

$(".class#id")または$("#id.class")は両方とも機能します。

この質問に対するみんなのコメントは、これを行う理由はないということです...うまく設計されたプログラムでこれを行う「ベストプラクティス」の理由はないかもしれませんが、現実の世界では、私たちのほとんどはコードを持っている会社で働いていますあまりよく整理されていないベースで、10000以上の大きなファイルプログラムで作業している場合は、説明のないIDを置き換えたくない場合があります。セレクターにクラスを追加することで、仲間のコーダーがIDの場所を理解できるようになります。から。

適切な例として、ページ上に「ウィジェット」を作成するコンテナDIVがあるプロジェクトに取り組んでいます...これらの「ウィジェット」にはデータベースから数値IDが与えられるため、_<div id="12345" class="widget">_で終わります。

私がここで働くずっと前に、他の誰かがあいまいなIDをコーディングしました...しかしそれは残っています。 JQueryを作成するときは、コードを混乱させたくないので、$("#12345")の代わりに$(".widget#12345")を使用して誰かがする必要がないようにします。このシナリオの12345IDがウィジェット用であることを理解するために30分を費やしてください。

したがって、$("#12345")と$(".widget#12345")は同じものを選択しますが、コードが同僚にとってはるかに読みやすくなり、速度の向上においてほんの一瞬よりも重要になります。 javascript用。

3
user1610157

なぜクラスでも選択する必要があるのですか？ IDは一意である必要があるため、クラスを追加しても何も購入されません。 IDだけを使用する場合は、jQueryが常に最速のネイティブgetElementByIDを使用できるため、より効率的です。可能な場合は、クエリを単純にしてください。

3
Parrots

ただのフォローアップFYI：

IDとサブクラスを参照する場合（たとえば、青ではなく緑のstatusLight）：

_<div id="green">
    <div class="statusLight"></div>
</div>

<div id="blue">
    <div class="statusLight"></div>
</div>
_

次に、スペースを追加する必要があります$("#green .statusLight")

1
Angus Walker

最も簡単な方法は次のとおりです。

$('.statusLight[id=green]');

IDは属性であるため、属性セレクターを使用できます

0
Thermech

おそらくこれを行うもう1つの理由は、特定のIDを探して汎用コードをキャッシュしたが、特定のスタイルが割り当てられている場合にのみアクティブにしたい場合です。特に、IDが特定のビューにある可能性があるがアクションを実行したくないスキャフォールドMVCアイテムをレンダリングする場合、たとえば「非表示」IDフィールドですが、他のビューでは、これらはコンボ内のルックアップ値であり、 Select2アドインが割り当てられました...

0
Brian Kirkpatrick