jQuery Partial Selectors

Question

I have a number of tables, which have nested tables. I using jQuery to hide some of the table cells as a number are empty or the contents irrelevant.

I use jQuery to hide all TD's and then jQuery to show them, for instance, if they contain a <P>.

Unfortunately some of the TD's don't contain anything but still need to be shown. The class the TD's are given is dynamic so I wont be able to code for them all (Sensibly) however they do all end 'Node'

I was wondering if its possible to do something like...

$(function() {
   $('TR .*Node').css('display','inline');
});

Answer 1

This will select any tds with Node somewhere in their class name.

$('td[class*=Node]').css('display','inline');

This will select any tds with Node at the end of their class name.

$('td[class$=Node]').css('display','inline');

Bear in mind that .show() does roughly the same thing as .css('display','inline');

Answer 2

The [attribute$="value"] selector will let you match attributes that end with a particular value. Note that using show() instead of changing the CSS directly will retain the display characteristics of the element you are revealing. If you really want to force them to display inline, you can revert it back to the css method with display: inline

 $('td[class$="Node"]').show();