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');
});

A bit unreleated, but what exactly does the $(function() {...}); bit mean? What's the difference between that and just writing the contents? Is it to do with scope? — Eric
– Eric, Commented Sep 2, 2009 at 16:04
So a shorthand for $(document).ready(), or $(window).load()? — Eric
– Eric, Commented Sep 2, 2009 at 16:10

Eric · Accepted Answer · 2012-10-24 06:13:12Z

38

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');

edited Oct 24, 2012 at 6:13

answered Sep 2, 2009 at 16:02

Eric

98.1k54 gold badges257 silver badges389 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

krdluzni Over a year ago

Just a note: I've had some trouble with the $= version in Firefox recently. If you have the same problem considering designing your classes a little differently. Remember, you aren't limited to one class per element.

Eric Over a year ago

Which reminds me, 'td[class$=Node]' will not match <td class="123Node specialcell">, as the class text does not end in node

tvanfosson · Accepted Answer · 2013-09-04 16:29:04Z

3

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();

edited Sep 4, 2013 at 16:29

answered Sep 2, 2009 at 16:04

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Comments

kaiz.net · Accepted Answer · 2009-09-02 16:06:19Z

2

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

answered Sep 2, 2009 at 16:06

kaiz.net

1,9943 gold badges23 silver badges31 bronze badges

Collectives™ on Stack Overflow

jQuery Partial Selectors

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related