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>

Do you know what the background is set to or just looking for any value? — MacAnthony
– MacAnthony, Commented Sep 3, 2009 at 15:31

Mike Blandford · Accepted Answer · 2009-09-03 16:47:01Z

3

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#:styles

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

edited Sep 3, 2009 at 16:47

answered Sep 3, 2009 at 16:35

Mike Blandford

4,0124 gold badges32 silver badges32 bronze badges

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

1 Comment

GordonBy Over a year ago

Haven't tested this yet... but its the best answer on here... hopefully will work ;)

gabtub · Accepted Answer · 2009-09-03 15:52:52Z

2

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

edited Sep 3, 2009 at 15:52

answered Sep 3, 2009 at 15:24

gabtub

1,4702 gold badges18 silver badges22 bronze badges

3 Comments

GordonBy Over a year ago

Have double checked... an no. Removing the single quotes does not make a difference. :(

GordonBy Over a year ago

won't removing the : mean that i'll now match attributes such as background-color etc etc. I'm just after the background attribute.

GordonBy Over a year ago

Removed the colon and.... nope. :( So weird that it doesn't work... looks right to me.

krdluzni · Accepted Answer · 2009-09-03 16:08:56Z

1

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.

answered Sep 3, 2009 at 16:08

krdluzni

7972 gold badges9 silver badges11 bronze badges

Comments

MacAnthony · Accepted Answer · 2009-09-03 15:28:57Z

0

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

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

answered Sep 3, 2009 at 15:28

MacAnthony

4,5212 gold badges25 silver badges27 bronze badges

Comments

MacAnthony · Accepted Answer · 2009-09-03 15:34:05Z

0

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

answered Sep 3, 2009 at 15:34

MacAnthony

4,5212 gold badges25 silver badges27 bronze badges

1 Comment

GordonBy Over a year ago

You are quite correct, my example td html element was incorrect. I have ammended it. Some of the td elements do have a background-color attribute, which i don't care about. I only want to match on background.

Collectives™ on Stack Overflow

Jquery attribute selector

5 Answers 5

1 Comment

3 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related