Вопрос по jquery – JQuery найти элементы по цвету фона

4

Попытка получить доступ к выбранной строке GridView с помощью JQuery, чтобы найти строку с атрибутом 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");

Возвращает неопределенный

Замечания:.find() возвращает пустой набор Также.css("background-color", "#FF6600") устанавливает свойство CSS. Rocket Hazmat

Ваш Ответ

4   ответа
0

определенном в служебном файле:

(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), поэтому вам нужно конвертировать красный в то же значение, для этого вы можете создать фиктивный элемент, который вставляется в тело (он может иметь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>

6

background-color это не атрибут, это свойство CSS. Вы можете попробовать использовать.filter сделать это:

    // Chrome returns "rgb(255, 102, 0)" instead of "#FF6600"
    return $(this).css('background-color') === "rgb(255, 102, 0)";
});
Все еще возвращаю длину 0. jmease
@jmease:console.log($(this).css('background-color')), Некоторые браузеры могут выводить что-то другое.
7

.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)" ;
});
0
$('tr').each(function(){
    if($(this).css('background-color') == '#ff6600'){
         //do your stuff
    }
});

Похожие вопросы