Jquery show Hide table rows based on data attribute and class

Question

Say I have a few rows in a table:

<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 those with a class, for example:

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

and I can hide those that have data-id = 3, for example:

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

However, what I really want to do is hide those that have data-id = 3, which DO NOT have a class to populate.

Can someone explain to me how to do this?

Answer 1

You can use the attribute selector in the [] notation and use [: not] to exclude those that have the .toplevel class

  $('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

Answer 2

try it

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

or

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

hide is a method that works for jQuery objects

$('tr').data('3') returns a string . Therefore, when I try to apply the hide method to it, it throws an error.

Answer 3

Try it....

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

The selector will get u all tr ​​(s) that do not have a toplevel class. Then you can perform any actions on these elements.

--- Edited ---- Try this $ ('Tr [class! = "Top level"] [data ID = "3"]') hide () ;.