jquery show hide表格基于数据属性和类的行

时间:2013-06-21 02:33:21

标签: jquery

说我有一些表格行:

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

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

3 个答案:

答案 0 :(得分:9)

您可以在[]表示法中使用属性选择器,并使用[: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

答案 1 :(得分:3)

试试这个

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

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

hide是一种适用于 jQuery对象

的方法

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

答案 2 :(得分:-2)

试试这个......

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

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

--- ----编辑 试试这个     $( 'TR [!类= “顶层”] [数据-ID = “3”]')隐藏();