jquery - JQuery 通过背景颜色查找元素

Question

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

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

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

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

返回空

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

返回未定义

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

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

Answer 3

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

Answer 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 中，值 red 被转换为rgb(255, 0, 0)，因此您需要将 red 转换为相同的值，为此您可以创建插入到 body 的虚拟元素（它可以有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>

Answer 5

试试这个

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