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

Posted 2023-02-25

【中文标题】jquery根据数据属性和类显示隐藏表行

【英文标题】：jquery show hide table rows based on data attribute and class

【发布时间】：2013-06-21 02:33:20

【问题描述】：

假设我有一些表格行：

<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 且没有***类的那些。

有人可以向我解释一下如何做到这一点吗？

【参考方案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

【讨论】：

这不排除那些toplevel类的人

刚刚添加了解释和附加链接，以备不时之需

【参考方案2】：

试试这个

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

或

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

hide 是一种适用于 jQuery 对象

的方法

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

【参考方案3】：

试试这个....

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

选择器将获取所有没有***类的 tr(s)。然后您可以对这些元素执行任何操作

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

【讨论】：

请参考这篇文章：***.com/questions/5309926/… 可能是一些 JQuery Conflicts for not working...