Select an element with it's background color is not working in jQuery

Question

Please check my code. The condition for checking the background color are not working.

https://jsfiddle.net/oL7tdL22/1/

$(function(){

$(".testing").each(function(){
   if($(this).css("background-color")=="rgb(255,193,0)"){
     alert("found");
   }
   else{
     alert("not found");
   }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="parent">
<div class="testing"  style="background-color:rgb(255,193,0)">
Test
</div>
</div>

<div class="parent">
<div class="testing"  style="background-color:rgb(220, 4, 81)">
Test
</div>
</div>


<div class="parent">
<div class="testing"  style="background-color:rgb(0, 186, 76)">
Test
</div>
</div>

When we are alert background color, it's working. But we cannot match the colors.

Answer 1

you need to give a space after each comma in rgb color code like rgb(255, 193, 0). Then it works.

$(function(){

$(".testing").each(function(){
   if($(this).css("background-color")=="rgb(255, 193, 0)"){
     alert("found");
   }
   else{
     alert("not found");
   }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="parent">
<div class="testing"  style="background-color:rgb(255,193,0)">
Test
</div>
</div>

<div class="parent">
<div class="testing"  style="background-color:rgb(220, 4, 81)">
Test
</div>
</div>


<div class="parent">
<div class="testing"  style="background-color:rgb(0, 186, 76)">
Test
</div>
</div>

Answer 2

You need to seperate the rgb values with a space, as JQuery parses the .css("background-color") value this way.

rgb(X, Y, Z)
      ▲  ▲

This is the correct code:

if($(this).css("background-color")=="rgb(255, 193, 0)"){
   alert("found");
}

Code snippet:

$(function(){
     $(".testing").each(function(){
        if($(this).css("background-color")=="rgb(255, 193, 0)")
          alert("found");
        else
          alert("not found");
     });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="parent">
    <div class="testing"  style="background-color:rgb(255,193,0)">Test</div>
</div>
<div class="parent">
    <div class="testing"  style="background-color:rgb(220, 4, 81)">Test</div>
</div>
<div class="parent">
    <div class="testing"  style="background-color:rgb(0, 186, 76)">Test</div>
</div>