web-dev-qa-db-ja.com

jQuery：クラスを介して要素を除外しますか？

名前の長いリストを掲載したウェブサイトがあります。監視しやすくするために、テキストリンクをに入れたいと思います

（ロード時）すべて表示

（Word "pears"をクリックすると）class = "Apple"ですべての要素を非表示にします

（Word "apples"をクリックすると）class = "pear"ですべての要素を非表示にします

（[すべて表示]をクリックすると）すべて表示

「入力時に」フィルタリングの本当に単純化されたバージョンのようになると思います。

このためのプラグインは存在しますか？どこから始めたらいいのかわからない！

jqueryfilter
16
Tom

うーん..次のようなリストがある場合：

<span class="Apple">red Apple</span>
<span class="Apple">green Apple</span>
<span class="pear">big pear</span>
<span class="pear">little pear</span>

以下はすべてを表示します：

$("span.*").show();

以下は、 'class = "Apple"'を持つすべての要素を非表示にします。

$("span[class='Apple']").hide();

または、 'class = "pear"'を持たないものをすべて非表示にすることもできます。

$("span[class!='pear']").hide();
21
gehsekky

この投稿にぶつかっただけで、古いことはわかっていますが、正直なところ、与えられた回答のどれもかなり役に立ちません。私の意見では、filter(':not()')のように、：notのフィルターを使用して要素をフィルターで除外できます。

Joel Potterで述べたように、$("span[class='Apple']").hide();を使用すると、クラス名が1つだけのスパンのみが選択されますApple。複数のクラスが存在する場合（可能性が高い）、そのようなアプローチは機能しません。

単語をクリックすると、例： pearsの場合、クラスpearsを含むnot要素を除外できます。

$('span').show().filter(':not(.pears)').hide();

そして、あなたは完了です;）

21
dbf

特定のクラスまたはその他の属性値を含む要素を除外するには、 属性に単語セレクターが含まれています を使用することをお勧めします。

$("span").filter("[class~='Apple']")

実際、class属性の場合、次のように記述する方がさらに簡単です。

$("span").filter(".Apple") // or:
$("span.Apple")

[これは、ジョエル・ポッターがコメントで書いたものでもあります この回答 。]

そうすれば、以下のすべてに一致することができます。

<span class="Apple">...</span>
<span class="Apple fruit">...</span>
<span class="fruit Apple sweet">...</span>

したがって、要素に1つのクラスしか設定されていないことが100％わからない場合は、~=演算子を使用してください。

13
Oliver