jQuery catch td

Question

Trying to catch td with style:

<td style="color: #333;">

Hope this should work, but it doesn't:

td:[style='color: #333;']

Any idea?

Thanks.

Answer 1

$('td[style="color: rgb(51, 51, 51);"], td[style="color: #333;"], td[style="COLOR: #333"]')

This works in Explorer 8, Firefox, Safari and Chrome demo

Answer 2

Seems like a missing feature.

$.fn.hasStyle = function(style){
   return this.filter(function(){
     return ($(this).attr('style').indexOf(style) > -1)
   }).length > 0;
};

Synopsis:

$('td').hasStyle('color: #333');

In your case it could be a custom selector even:

$(document).ready(function(){
  $.extend($.expr[':'], {
       hasStyle: function(e, i, arg){
          var s = new String($(e).attr('style'));        
          return( s !== 'undefined' && s.indexOf(arg[3]) > -1 );
       }
  }); 
});​

Synopsis:

 $('td:hasStyle("color: #333")').fadeOut('slow');

working example:

http://jsbin.com/atavu3/edit

Answer 3

I suspect the reason it doesn't work is because some browsers will "normalise" values. So you might find that in parsing it actually changes the #333 to a more standard 6 character colour string #333333 (or maybe even an rgb() style one). I have to admit I can't think of a way around this off the top of my head though but you should be able to cofnirm if this is the case with a few simple tests to read the current values.