jquery show hide table rows based on data attribute and class

Question

say I have some table rows:

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

So as far as I know I can hide the ones with class toplevel like:

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

and I can hide the ones with data-id=3 like:

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

However what I really want to do is hide the ones with data-id=3 that DON'T have the class toplevel.

Could someone please explain to me how to do this?

Answer 1

You can use attribute selector within [] notation and use [:not] to exclude the ones with class .toplevel

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

Or

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

See Attribute Selectors

:not Selector

Fiddle