How to find element has specific color using jquery

问题

Here is my HTML code

<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;
}

What I need is a jQuery function which can find all the li elements in red color and can convert the background to yellow

I mean something like

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

回答1:

You can use .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>

回答2:

You can use attribute selector [attr=value] DEMO

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

You can also do this with pure 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>

Update: This is not best way to do this but you could check each li for color and that returns rbg and add background DEMO

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

回答3:

try that,

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

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

Or using each() loop

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

Working JSFiddle

回答4:

You can use .filter() to filtering element selection. Use style.color property in function of filter() to getting color of element.

$("#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>

来源：https://stackoverflow.com/questions/38306873/how-to-find-element-has-specific-color-using-jquery

标签

javascript

jquery

html

css

colors