jquery - 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

请参阅属性选择器

:not 选择器

小提琴

Answer 2

尝试这个

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

或者

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

hide是一种适用于jQuery 对象的方法

$('tr').data('3')返回一个字符串。hide因此，当您尝试对其应用该方法时，它将引发错误 。

Answer 3

尝试这个....

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

选择器将为您提供所有没有顶级类的 tr(s)。然后您可以对这些元素执行任何操作

---已编辑---- 试试这个 $('tr[class!="toplevel"][data-id="3"]').hide();