Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Partial Selectors

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');
});
like image 659
CLiown Avatar asked Sep 02 '09 16:09

CLiown


People also ask

Can we use multiple selectors in jQuery?

You can specify any number of selectors to combine into a single result. This multiple expression combinator is an efficient way to select disparate elements. The order of the DOM elements in the returned jQuery object may not be identical, as they will be in document order.

How use contains in jQuery?

The :contains() selector selects elements containing the specified string. The string can be contained directly in the element as text, or in a child element. This is mostly used together with another selector to select the elements containing the text in a group (like in the example above).

What is id in jQuery?

The jQuery #id selector uses the id attribute of an HTML tag to find the specific element. An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.


2 Answers

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

like image 135
Eric Avatar answered Sep 30 '22 18:09

Eric


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();
like image 34
tvanfosson Avatar answered Sep 30 '22 18:09

tvanfosson