jquery 根据数据属性和类显示隐藏表行

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

参见Attribute Selectors

<强> :not Selector

Fiddle