Question

尝试使用JQuery访问GridView的Selected行，找到background-color属性设置为SelectedRowStyle背景颜色的行。那种颜色是＃FF6600。我试过了

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

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

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

返回空

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

返回undefined

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中将红色值转换为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>

Answer 5

尝试一下

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

JQuery按背景颜色查找元素

5 个答案: