Sree Sree - 5 months ago 11
CSS Question

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

Kld Kld
Answer

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>