Jquery attribute selector

Question

I have a variable (div element) which contains some table html.

I can use this javascript to add a class to each cell that has a background set.

  var tds = tempDiv.getElementsByTagName("TD");
  for (var j = 0; j < tds.length; j++) {
    var oTd = tds[j];

    if (oTd.style.background.length > 0) {
      oTd.className = 'faketh';
      oTd.setAttribute('style', 'Clear');
    } //if
  }//for

what i'd like to do is do the same in jquery. Below is what i've come up with, and the second line works fine, but the first doesn't....

  $(tempDiv).find("td[style*='background:']").addClass("faketh");
  $(tempDiv).find("td").removeAttr('style');

Any help would be appreciated.

Edit: Just to add; I'm using the code below without issue.

  $(tempDiv).find("tr:odd").addClass('row0');
  $(tempDiv).find("tr:even").addClass("row1");

So its not the adding of the class thats the problem... The issue is that i'm not finding any matching elements. Here is one of the td elements;

<td valign="top" class="faketd" style="border: 1pt solid windowtext; padding: 0cm 5.4pt; background: silver none repeat scroll 0% 0%; width: 131.4pt; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">
        <p style="margin: 0cm 0cm 0pt; text-align: justify;"><strong>VPN Name/Description:</strong></p>
        </td>

Answer 1

try this

$(tempDiv).find("td[style*=background]").addClass("faketh");

EDIT to prevent selection of elements that have some kind of "background-" you could also do following

$(tempDiv).find("td[style*=background]:not(td[style*=background-])").addClass("faketh");

but if an element has both "background:blabla" and "background-color:#FFF", it won't be selected

Answer 2

Depending on what tempDiv is, you should also be able to shorten it up by doing:

$(tempDiv + " td[style*=background:]").addClass("faketh");

Answer 3

You are searching for the string 'background:' but in the example you gave, it's using 'background-color:'

So change it to either:

$(tempDiv).find("td[style*=background-color:]").addClass("faketh");

or:

$(tempDiv).find("td[style*=background]").addClass("faketh");

Answer 4

A few warnings:

• The contents of the style selector should be quoted (check the samples in the Jquery docs), as you have them in the question, not unquoted as others recommend.
• Be careful with checking the style attribute in jQuery attribute selectors. The browser may modify the contents of the string (re-ordering, the spacing around the colon, etc.) for it's internal representation, and each browser does this slightly differently.

The most important bit:

• Are you using Firefox? I've had trouble with attribute selectors in Firefox once or twice, so if you've only tested in Firefox, check Chrome/IE/Safari/Opera/etc. It won't solve the problem, but may give you a different scope for it.

Answer 5

I don't think you can do this using selectors natively in jQuery. The style attribute is not stored as a string by the browser, it's an object.

It has been implemented, however: http://code.google.com/p/aost/wiki/CustomJQuerySelectorInTellurium#%3Astyles

Or you can use $.each in something like this:

$("img").each(function() {
    if($(this).css('background').length > 0) {
  $(this).addClass('faketh');
    }

});

Or you can use the jQuery filter:

var x = $("#tempDiv td").filter(function(i){
    return $(this).css("background").length > 0;
});