CODEWITHSUNDEEP
jquery
jmease
jmease

Reputation: 2535

JQuery Find Elements By Background-Color

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

Upvotes: 5

Views: 12504

Answers (5)

Tasso Mello
Tasso Mello

Reputation: 367

Try this

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

Upvotes: 0

jcubic
jcubic

Reputation: 66488

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>

Upvotes: 0

Kevin B
Kevin B

Reputation: 95024

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

Upvotes: 8

gen_Eric
gen_Eric

Reputation: 227230

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

Upvotes: 6

idrumgood
idrumgood

Reputation: 4924

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

Upvotes: 0

Related Questions