web-dev-qa-db-ja.com

識別子（id）のワイルドカードセレクターはありますか？

特定の命名スキームを共有する不明な量の識別子がある場合、jQueryを使用して一度にそれらを取得する方法はありますか？

// These are the IDs I'd like to select
#instance1
#instance2
#instance3
#instance4

// What do I need to add or how do I need to modify this jQuery selector in order to select all the IDs above?
("#instanceWILDCARD").click(function(){}
jqueryjquery-selectorswildcard
63
Matt Elhotiby

属性はセレクタで始まる（'^=） は、次のようにIDに対して機能します。

$("[id^=instance]").click(function() {
  //do stuff
});

ただし、たとえば、要素に共通のクラスを与えることを検討してください（私は自分自身を解体します）.instance、およびそのセレクターを使用します。

$(".instance").click(function() {
  //do stuff
});
168
Nick Craver

IDではなくクラスを本当に一致させたい場合、クラスは複数の値を持つことができるため、構文がもう少し複雑になります。

// handle elements like <div class="someclass1"></div>
$('[class^="someclass"]').click(function() {
   // do stuff
});

// handle elements like <div class="foo someclass1"></div>
$('[class*=" someclass"]').click(function() {
   // do stuff
});
85
Eric

（jQueryのセレクター機能を拡張することによって）独自のフィルターセレクターの作成について誰も言及していないことに驚いています。ここでは、ワイルドカード文字列を受け入れ、一致するすべての要素を検索する「likeClass」および「likeId」と呼ばれるワイルドカードセレクターを作成しました（Regexマッチングに類似）。

コード：

$.expr[':'].likeClass = function(match){
      return $('[class*=" '+ match +'"]');
};
$.expr[':'].likeId = function(match){
      return $('[id*=" '+ match +'"]');
};

使用例：

ここで、.content-1、.content-2、.content-n ...などの類似した名前のdiv要素が複数あり、それらを選択するとします。今はケーキです！

$（ 'div：likeClass（content-）'）; //同様のクラス名を持つすべての要素を返します：content- *

または

$（ 'div：likeClass（content-）'）; //同様のIDを持つすべての要素を返します：content- *

ああ、もう一つ...あなたもそれを連鎖させることができます。 :)

$('li:likeId(slider-content-)').hide().addClass('sliderBlock').first().fadeIn('fast');

楽しい！

11
Timothy Perez

JQueryがあれば追加のexprや派手なものは必要ありません

jQuery('[class*="someclass"]').click(function(){
});

jQuery('[id*="someclass"]').click(function(){
});

前述のとおり： https://stackoverflow.com/a/2220874/2845401

11
Shinrai

なぜ_class = "instance"_をそれらすべてに割り当て、$('.instance')を使用して選択しないのですか？

3
casablanca

これらはIDですが、次のようなことができます：

$("[id^='instance']").click(...)

それは少し高価です-a）要素のタイプまたはb）DOMの一般的な位置のいずれかを指定できる場合に役立ちます：

$("#someContentDiv span[id^='instance']").click(...)

[id^='...']セレクタは、基本的には「id$=（IDはこの文字列で終わる）など.

JQuery Docsページ here で包括的なリストを見つけることができます。

3
mway

ニンジンを使用します。

$("div[id^=instance]").hide();

jsFiddleの例

2
jhanifen