JQuery 通过背景颜色查找元素答案

【问题标题】：JQuery Find Elements By Background-ColorJQuery 通过背景颜色查找元素
【发布时间】：2012-05-31 21:06:47
【问题描述】：

试图访问 GridView 的 Selected 行，方法是使用 JQuery 查找背景颜色属性设置为 SelectedRowStyle 背景颜色的行。那个颜色是#FF6600。我试过了

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

但这只是将所有行设置为橙色。

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

返回空

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

返回未定义

【问题讨论】：

注意：.find() 返回一个空集。 .css("background-color", "#FF6600") 还设置 CSS 属性。

标签： jquery

【解决方案1】：

试试.filter 方法。

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

我没有测试过，可能需要调整rgb部分以考虑间距。

编辑：

或者更好的是，这考虑到了大写和小写

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

【讨论】：

【解决方案2】：

background-color 不是属性，而是 CSS 属性。您可以尝试使用.filter 来执行此操作：

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

【讨论】：

仍然返回长度为 0。
@jmease：console.log($(this).css('background-color'))。某些浏览器可能会输出不同的内容。

【解决方案3】：

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

【讨论】：

【解决方案4】：

我在我的代码中使用这个伪 jQuery 选择器，在实用程序文件中定义：

(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>

如果您需要选择带有li:css(color: red) 的元素来选择红色节点，在 Chrome 中红色值会转换为rgb(255, 0, 0)，因此您需要将红色转换为相同的值，为此您可以创建虚拟元素插入到正文中（可以有visibility: hidden）

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

元素可以插入一次，使用：

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>

【讨论】：

【解决方案5】：

试试这个

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

【讨论】：