How to find a background and then set other background in JQuery

Question

I have this for now:

$(document).ready(function () {  
   var allTdElements = $( "td > div" );
   //logic in here
   $(document).find(allTdElements).css("background-color", "blue" );                                        
});

I find all td has div in it but now I want to find in that div what background has. For example It could be 2 different colors green and red. And if its red i'll change the color to another, and green the same as red.

But between the instruction of var allTdElements = $( "td > div" ); and $(document).find(allTdElemen... i don't know how to search it.

After change a few thing I got this:

$(document).ready(function () {  
    var allTdElements = $( "td > div" );
    var color = $( allTdElements ).css( "background-color" );

    if (color == 'red')
       $(document).find(allTdElements).css("background-color", "red" );
    else
       $(document).find(allTdElements).css("background-color", "green" );                               
});

But I want to change the td what contain the div.

PROBLEM SOLVED:

Thanks to @Stewartside. I'll write the solution of anyone has the same problem.

 $(document).ready(function() {
     $('td div').each(function() {
        $(this).parent().css('background-color', $(this).css('background-color'));
    });
 });

Try with `....css('backgroundColor', 'blue')` – kosmos May 13 '15 at 09:29 — kosmos, May 13 '15 at 09:29
I updated my answer with more information. – Arnau Guadall May 13 '15 at 09:34 — Arnau Guadall, May 13 '15 at 09:34
I updated the post with the solution. – Arnau Guadall May 13 '15 at 10:13 — Arnau Guadall, May 13 '15 at 10:13

score 2 · Answer 1 · answered May 13 '15 at 09:29

2

the following code will change blue to green and vise versa

$('td > div').each(function(){
var color=$(this).css('background-color');
if(color=='blue')
$(this).css('background-color','green');
else
$(this).css('background-color','blue');  
});

answered May 13 '15 at 09:29

Avinash Perla

193
5

Thanks, what worked out. But how I do to change the css to the td who contain the div? – Arnau Guadall May 13 '15 at 09:35

Stewartside · Accepted Answer · 2015-05-13T09:52:31.770

2

jQuery will usually get the background-color out in RGB format, so therefore you are going to have do a check against the RGB version of the colour you are searching for.

I have also used .each() which should make things clearer and easier to understand.

Below is a working example:

$(document).ready(function() {
  $('td div').each(function() {
    $(this).parent().css('background-color', $(this).css('background-color'));
  });

});

td {
  padding: 5px;
}
td:nth-child(1) div {
  background: red;
}
td:last-child div {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div>Test 1</div>
    </td>
    <td>
      <div>Test 2</div>
    </td>
    <td>
      <div>Test 3</div>
    </td>
  </tr>
</table>

edited May 13 '15 at 09:52

answered May 13 '15 at 09:35

Stewartside

20,378
12
60
81

But the problem I have is some div's has red background and some green. So I want to pass the propierty background div to td because the div cannot fill the whole content of td. – Arnau Guadall May 13 '15 at 09:47
there is a background-color in the div, but i want to set the same blackground the div has to td. That's why i'm trying to get the value of div to pass it to the td. – Arnau Guadall May 13 '15 at 09:50
Thanks, english is is not my native lenguage and its quite difficult to explant what I want. – Arnau Guadall May 13 '15 at 10:04
yes! That worked very well. I updated the first post with the new solution you provided. Thank you a lot. – Arnau Guadall May 13 '15 at 10:09

score 0 · Answer 3 · edited May 23 '17 at 11:43

0

This is not possible with a selector. What you could do is find out which classes are responsible for the background colors, and make a selector for those, e.g. $('td > div.red-background').

A similar question has been asked before.

edited May 23 '17 at 11:43

Community

1
1

answered May 13 '15 at 09:29

Glorfindel

21,988
13
81
109

How to find a background and then set other background in JQuery

3 Answers3