如何使用jquery查找具有特定颜色的元素答案

【问题标题】：How to find element has specific color using jquery如何使用jquery查找具有特定颜色的元素
【发布时间】：2016-11-13 09:31:00
【问题描述】：

这是我的 HTML 代码

<ul id="components">
    <li>Computer</li>
    <li>Mouse</li>
    <li>Keyboard</li>
    <li>Printer</li>
    <li>CPU</li>
</ul>

#components li:first-child{
    color:red;
}
#components li: nth-child(2){
    color:blue;
}
#components li: nth-child(3){
    color:red;
}
#components li: nth-child(4){
    color:red;
}
#components li: nth-child(5){
    color:green;
}

我需要的是一个jQuery函数，它可以找到red颜色中的所有li元素，并且可以将背景转换为黄色

我的意思是像

$("#components").find(li elements in red color).css("backgound","yellow"); 
// find li elements in red color and change the background to yellow

【问题讨论】：

改用类和css规则。样式是如何设置的？

标签： javascript jquery html css colors

【解决方案1】：

您可以使用.filter();

 $('ul li').filter(function() {
   return $(this).css('color') == 'rgb(255, 0, 0)';
 }).each(function() {
   $(this).css('background-color', 'yellow');
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<ul id="components">
  <li style="color:red">Computer</li>
  <li style="color:blue">Mouse</li>
  <li style="color:red">Keyboard</li>
  <li style="color:red">Printer</li>
  <li style="color:green">CPU</li>
</ul>

【讨论】：

@Sree 你不需要在filter()之后使用each()

【解决方案2】：

你可以使用属性选择器[attr=value]DEMO

$('ul li[style="color:red"]').css('background', 'yellow');

你也可以用纯 CSS 做到这一点

ul#components li[style="color:red"] {
  background: yellow;
}

<ul id="components">
  <li style="color:red">Computer</li>
  <li style="color:blue">Mouse</li>
  <li style="color:red">Keyboard</li>
  <li style="color:red">Printer</li>
  <li style="color:green">CPU</li>
</ul>

更新：这不是最好的方法，但您可以检查每个 li 的颜色并返回 rbg 并添加背景 DEMO

$('ul li').each(function() {
  var color = $(this).css('color');
  if (color == 'rgb(255, 0, 0)') $(this).css('background', 'yellow');
})

【讨论】：

这很有帮助。但我不想添加style="color:red" inline。为了更好地理解我添加了内联
你应该提到这个问题。 color: red怎么设置？

【解决方案3】：

您可以使用.filter() 来过滤元素选择。在filter() 的函数中使用style.color 属性来获取元素的颜色。

$("#components > li").filter(function(){
    return this.style.color == "red";
}).css("background-color", "yellow");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="components">
    <li style="color:red">Computer</li>
    <li style="color:blue">Mouse</li>
    <li style="color:red">Keyboard</li>
    <li style="color:red">Printer</li>
    <li style="color:green">CPU</li>
</ul>

【讨论】：

【解决方案4】：

试试看，

$('li[style="color:red"]').css('background-color','yellow')

或者

$('li[style="color:red"]').attr('style','color:red;background-color:yellow;')

或者使用 each() 循环

var allLi=$('li')
$.each(allLi,function(k,v){
if($(v).attr('style')=='color:red')
{
$(v).css('background-color','yellow')
}
})

工作JSFiddle

【讨论】：

这很有帮助。但我已经编辑了我的问题，请检查
如果你没有任何理由，你不必投反对票