jquery - jquery showは、データ属性とクラスに基づいてテーブルの行を非表示にします

Question

いくつかのテーブル行があるとします:

<tr class="toplevel" data-id="3">
 ...
</tr>
<tr data-id="3">
 ...
</tr>
<tr data-id="3">
 ...
</tr>

したがって、私が知る限り、次のようなクラストップレベルのものを非表示にすることができます:

$('tr.toplevel').hide();

そして、次のように data-id=3 のものを非表示にすることができます:

$('tr').data('3').hide();

しかし、私が本当にやりたいことは、クラスのトップレベルを持たない data-id=3 のものを非表示にすることです。

誰かが私にこれを行う方法を説明してもらえますか?

Answer 1

記法内で属性セレクター[]を使用し、[:not] を使用してクラスを持つものを除外できます.toplevel

 $('tr:not(.toplevel)[data-id="3"]').hide(); 
    ^   ^                      ^
    |   |                      |
all trs but .toplevel of which select the ones with data-id attribute value 3

または

$('tr:not([class="toplevel"])[data-id="3"]').hide(); //Less efficient though due to explicit attribute name class

属性セレクターを参照してください

:セレクターではない

フィドル

Answer 2

これを試して

$('tr:not(.toplevel)[data-id="3"]').hide();

また

$('tr[data-id="3"]').not('.toplevel').hide();

hidejQueryオブジェクトに対して機能するメソッドです

$('tr').data('3')文字列を返します。hideそのため、メソッドを適用しようとするとエラーがスローされます 。

Answer 3

これを試して....

$('tr[class!="toplevel"]').data('3').hide();

セレクターは、トップレベル クラスを持たないすべての tr(s) を取得します。その後、その要素に対して任意のアクションを実行できます。

---編集済み---- これを試してください $('tr[class!="toplevel"][data-id="3"]').hide();