javascript - 如何在 JQuery 中找到一个背景然后设置其他背景

Question

我现在有这个:

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

我发现所有 td 中都有 div 但现在我想在那个 div 中找到背景。例如它可以是两种不同的颜色绿色和红色。如果它是红色，我会将颜色更改为另一种颜色，绿色与红色相同。

但是在 var allTdElements = $( "td > div"); 和 $(document).find(allTdElemen... 的指令之间我不知道如何搜索它。

改变一些东西后我得到了这个:

$(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" );                               
});

但我想更改包含 div 的 td。

问题已解决:

感谢@Stewartside。我会写下任何人遇到同样问题的解决方案。

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

Answer 1

jQuery 通常会以 RGB 格式获取背景颜色，因此您需要检查要搜索的颜色的 RGB 版本。

我还使用了 .each()，这应该会让事情变得更清晰、更容易理解。

下面是一个工作示例:

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