jquery - AND および OR 演算子を使用した属性による jQuery 選択

Question

jQueryで、ANDとORを使用して名前付き属性で要素を選択できるかどうかを考えています。

例：

<div myid="1" myc="blue">1</div>
<div myid="2" myc="blue">2</div>
<div myid="3" myc="blue">3</div>
<div myid="4">4</div>

すべての要素を選択したいのですが、1 または 3myc="blue"に設定されている要素のみを選択します。myid

だから私は試しました：

a=$('[myc="blue"] [myid="1"]  [myid="3"]');

しかし、それは機能しません。ここでも同じです:

a=$('[myc="blue"] && [myid="1"] || [myid="3"]');

特別なフィルター関数を書かなくても可能ですか?

score 217 · Accepted Answer

AND演算

a=$('[myc="blue"][myid="1"][myid="3"]');

OR演算、コンマを使用

a=$('[myc="blue"],[myid="1"],[myid="3"]');

@ベガがコメントしたように：

a=$('[myc="blue"][myid="1"],[myc="blue"][myid="3"]');

score 19 · Accepted Answer

$('[myc="blue"]').filter('[myid="1"],[myid="2"]');

一般に、セレクターの連鎖a.foo.bar[attr=value]は、ある種の AND セレクターのようなものです。

jQuery には、サポートされているセレクターに関する広範なドキュメントがあり、一読の価値があります。

score 11 · Accepted Answer

以下のようなフィルターを書いてみてはいかがでしょうか。

$('[myc="blue"]').filter(function () {
   return (this.id == '1' || this.id == '3');
});

編集： @ジャックありがとう..完全に見逃した..

$('[myc="blue"]').filter(function() {
   var myId = $(this).attr('myid');   
   return (myId == '1' || myId == '3');
});

score 6 · Accepted Answer

セレクターの and 演算子は単なる空の文字列であり、or 演算子はコンマです。

ただし、グループ化や優先度がないため、次のいずれかの条件を繰り返す必要があります。

a=$('[myc=blue][myid="1"],[myc=blue][myid="3"]');

score 5 · Accepted Answer

最初にすべての状況で発生する条件を見つけてから、特別な条件をフィルタリングします。

$('[myc="blue"]')
    .filter('[myid="1"],[myid="3"]');

score 1 · Accepted Answer

あなたの特別なケースでは、それは

a=$('[myc="blue"][myid="1"],[myc="blue"][myid="3"]');

score 0 · Accepted Answer

JQuery は CSS セレクターを使用して要素を選択するため、次のようにコンマで区切って複数のルールを使用する必要があります。

a=$('[myc="blue"], [myid="1"], [myid="3"]');

編集：

申し訳ありませんが、青と 1 または 3 が必要でした。

a=$('[myc="blue"][myid="1"],  [myid="3"]');

2 つの属性セレクターを組み合わせると AND になり、カンマを使用すると OR になります。

score -1 · Accepted Answer

あなたが述べた論理演算を使用して要素を適切に選択するには、「特別なフィルター関数」ではなくjQuery.filter()、操作が必要です。AND操作にも必要jQuery.add()ですOR。

var elements = $('[myc="blue"]').filter('[myid="1"').add('[myid="3"');

または、単一のセレクターで短縮形を使用して実現することもできます。ここでは、セレクターをまとめてとして機能さANDせ、コンマで区切ってとして機能させますOR。

var elements = $('[myc="blue"][myid="1"], [myid="3"]');

8 に答える 8