CODEWITHSUNDEEP
htmljquerycss
stackBD21
stackBD21

Reputation: 79

jQuery if statement for picking specific div and css

I'm facing an interesting problem here. Trying to solve but still can't.

Suppose, I have a 3x3 table box using div element. And one of my cell background color is #999. Now what I want is: Using jQuery if statement, pick any specific cell via its background-color and if it is true than put another background-color in another cell.

I mean. Lets see here sell no.5 has background-color #999. Now if cell 5 has background-color #999 than wanna put background-color #777 in cell 6.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  if ( $( "div.table div:nth-child(5)" ).css("background-color") === "#999") {
    $( "div.table div:nth-child(6)" ).css("background-color", "#777");
  };
  
});
</script>
div.table div {
  width: 30%;
  display: inline-block;
  border: 1px solid #444;
  text-align: center;
  padding: 5px
}
div.table div:nth-child(5) {
  background-color: #999
}
<div class="table">
  <div> 1 </div>
  <div> 2 </div>
  <div> 3 </div>
  <div> 4 </div>
  <div> 5 </div>
  <div> 6 </div>
  <div> 7 </div>
  <div> 8 </div>
  <div> 9 </div>
</div>

Upvotes: 2

Views: 37

Answers (1)

Chaska
Chaska

Reputation: 3205

Your logic is correct. Just validate color in hexadecimal instead of RGB.

$(document).ready(function(){
  if ( $( "div.table div:nth-child(5)" ).css("background-color") === "rgb(153, 153, 153)") {
    $( "div.table div:nth-child(6)" ).css("background-color", "#777");
  };
  
});
div.table div {
  width: 30%;
  display: inline-block;
  border: 1px solid #444;
  text-align: center;
  padding: 5px
}
div.table div:nth-child(5) {
  background-color: #999
}
<div class="table">
  <div> 1 </div>
  <div> 2 </div>
  <div> 3 </div>
  <div> 4 </div>
  <div> 5 </div>
  <div> 6 </div>
  <div> 7 </div>
  <div> 8 </div>
  <div> 9 </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Upvotes: 1

Related Questions