JQuery Find Elements By Background-Color

Question

Trying to access the Selected row of a GridView by using JQuery to find the row with the background-color attribute set to the SelectedRowStyle background color. That color is #FF6600. I've tried

var row = $("tr").find().css("background-color", "#FF6600");

But that just sets all the rows to orange.

var row = $("tr[background-color=#FF6600");

That returns empty

var row = $("tr").find().attr("background-color");

Returns undefined

Answer 1

Try the .filter method.

var rows = $('tr').filter(function(){
    var color = $(this).css("background-color");
    return color === "#FF6600" || color === "rgb(255, 102, 0)" ;
});

I haven't tested it, the rgb part may need to be adjusted to account for spacing.

Edit:

or better yet, this takes into account uppercase vs lowercase

var rows = $('tr').filter(function(){
    var color = $(this).css("background-color").toLowerCase();
    return color === "#ff6600" || color === "rgb(255, 102, 0)" ;
});

Answer 2

background-color is not an attribute, it's a CSS property. You can try using .filter to do this:

var row = $("tr").filter(function(){
    // Chrome returns "rgb(255, 102, 0)" instead of "#FF6600"
    return $(this).css('background-color') === "rgb(255, 102, 0)";
});

Answer 3

$('tr').each(function(){
    if($(this).css('background-color') == '#ff6600'){
         //do your stuff
    }
});

Answer 4

I use this pseudo jQuery selector in my code, defined in utility file:

(function() {
  function rgb2hex(rgb) {
    return '#' + rgb.match(/^rgb\(([^\)]+)\)$/)[1].split(/\s*,\s*/)
      .filter(Boolean).map(function(n) {
         return ('00' + parseInt(n, 10).toString(16)).slice(-2);
      }).join('');
  }
  $.extend($.expr[':'], {
  // pesudo selector that allow to use :css(color: red)
    css: function(element, index, meta) {
      element = $(element);
      var rules = meta[3].split(';').filter(Boolean);
      return rules.filter(function(pair) {
        pair = pair.split(/\s*:\s*/);
        var css = element.css(pair[0]);
        if (css.match(/rgb\(/)) {
          css = rgb2hex(css);
        }
        return css === pair[1];
      }).length === rules.length;
    }
  });
})();
$(function() {
  $('li:css(color: #ff0000)').css('background', 'black');
});

.red { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="red">1</li>
<li style="color: red">2</li>
<li style="color: blue">3</li>
<li>4</li>
</ul>

If you need to select element with li:css(color: red) to select red nodes, in Chrome the value red is converted to rgb(255, 0, 0), so you need to convert red to the same value, to do that you can create dummy element that is inserted to body (it can have visibility: hidden)

var tmp = $('<span/>').css('visibility', 'hidden').appendTo('body');

element can be inserted once, and use:

tmp.css(pair[0], pair[1]);
//or
tmp.css.apply(tmp, pair);
// and
return tmp.css(pair[0]) == element.css(pair[0]);

(function() {
  var tmp = $('<span/>').css('visibility', 'hidden').appendTo('body');
  $.extend($.expr[':'], {
  // pesudo selector that allow to use :css(color: red)
    css: function(element, index, meta) {
      element = $(element);
      var rules = meta[3].split(';').filter(Boolean);
      return rules.filter(function(pair) {
        pair = pair.split(/\s*:\s*/);
        tmp.css.apply(tmp, pair);
        return tmp.css(pair[0]) == element.css(pair[0]);
      }).length === rules.length;
    }
  });
})();
$(function() {
  $('li:css(color: red)').css('background', 'black');
});

.red { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="red">1</li>
<li style="color: red">2</li>
<li style="color: blue">3</li>
<li>4</li>
</ul>

Answer 5

Try this

$('tr').toArray().filter(f => f.style.backgroundColor == '#FF6600')