jQuery，将表格元素的背景颜色设置为前一个元素的颜色？答案

【问题标题】：jQuery, set background color of a table element to color of previous element?jQuery，将表格元素的背景颜色设置为前一个元素的颜色？
【发布时间】：2012-05-21 14:39:43
【问题描述】：

我想动态设置 div 的背景颜色等于直接进行它的表行的背景颜色。以下是我认为我想做的事情：

$(this).next().css('background-color', $(this).css('background-color'));

在此板上寻找答案时，我找到了this thread。这似乎是对他们有用的答案，但我的不起作用。任何建议都欣然接受。

编辑

对于那些要求查看我正在尝试做什么的人，这里是构建我的表格主体的 PHP 代码：

<?php
//  For every row past the first (header) row, create a table entry
    while ( $row = fgetcsv($handle) ) {

        echo "<tr class='c_edd_row'>";                      
        //  Build each cell         
        $num = count($row);         
        for ($c=0; $c < $num; $c++) {
            //  Do not echo entries 23 through 27 (unused cells)
           if ( $c < 23 || $c > 27 ) {
              echo "<td>".$row[$c]."</td>";
              //  save the last entry for the hidden div
              $validation_notes = $row[$c];
          }
        }
        echo "</tr>";
        echo "<tr class='c_sub_row'>
        <td colspan='42' class='c_notes_div'>
        <div class='c_notes_div'>".$validation_notes."</div>
        </td></tr>";
    }
?>

响应者是正确的，我没有很好地说明我的问题。我所说的 div 实际上包含在 TRs 中。我将其用作最后一行条目中包含数据的每一行的下拉列表。

当我单击一行时，具有 c_sub_row 类的下一行从 display:none 更改为 display:table-row，效果很好，但是当发生这种情况时，我需要它来获取前一行的颜色。

最终更新 - 非常感谢 Jonathan Sampson

这是最终的解决方案，基于下面的 cmets：

$('.c_edd_row').on('click',  function(event) {
    var bg = $(this).css("background-color");
    $(this).next().css("background-color", bg);   //  colors the next row
    $(this).next().find('div').css("background-color", bg);  //  colors the div
});

【问题讨论】：

您能否提供一个简单的 HTML 结构来描述您想要的内容？你的描述不是很清楚。
通常一个 div 元素并不意味着在一个元素旁边，这就是为什么这对你不起作用，因为它在当前元素之后读取元素的 backgroundcolor 属性。正如 Lior 所说，我们需要查看 html 来为您优化代码
您的元素是子元素（与表格相同）还是表格的父元素？
感谢您的 cmets。希望我发布的编辑将向您展示我的表格是如何构建的。

【解决方案1】：

表格行永远不会直接位于 div 元素之前 - 这将是无效的表格标记。如果您想将 tr 的背景设置为其前面的 tr 的背景，您可以执行以下操作：

$("tr:eq(1)").css("background-color", function(){
  return $(this).prev().css("background-color");
});

或者您可能在tr 中有一个div，并且您希望div 具有与tr 相同的背景颜色，该tr 位于div 的父级之前：

$(this).css("background-color", function(){
  return $(this).closest("tr").prev().css("background-color");
});

其中this 是当前的div 元素。

这里的神奇之处在于用作$.css 方法的第二个参数的匿名函数。从它里面你可以做任何事情。例如，我们可以选择页面上的任何其他元素并复制其背景颜色：

$(this).css("background-color", function(){
  return $(".someOtherDiv").css("background-color");
});

再次假设 this 是我们的目标 div 元素，它现在将具有与 <div class="someOtherDiv">...</div> 相同的背景颜色。

更新

从 cmets 看来，您有两个表格行（至少）。一个可见，下一个隐藏。在第二个中，您有一个 div。当您单击第一个（可见）表格行时，您希望同时显示第二个并将第一个 TR 的 bg 应用于第二个（现在可见）表格行中的 DIV：

$("tr:visible").on("click", function(event){
  var bg = $(this).css("background-color");
  $(this).next().show().find("div").css("background-color", bg);
});

【讨论】：

您的 #2 解决方案完美地描述了我正在尝试做的事情，但代码并不能很好地工作 - 它实际上将单击的行设置为等于以下 div，与我想要的相反。我会继续啃你的代码，但任何进一步的建议将不胜感激。感谢您的宝贵时间。
所以你有两个 div 元素，立即并排 (<div>foo</div><div>bar</div>)。当你点击第二个时，你想让它获得第一个的背景？
不，我在每个可见行之后都有一个带有 display:none 的表格行，隐藏行包含一个 div。 div 只是我想要显示的一些内容的方便容器。当我单击可见行时，它下面的行变得可见，并且 div 也随之可见。正是这个隐藏的（现在可见的）行和它包含的 div，我想采用它上面单击的行的 bg 颜色。
@Stanton 请查看我的更新，并纠正我可能有的任何误解。
老兄，我想你已经确定了。我做了一些细微的改变（主要是为了适应我正在做的其他事情），我让它完美地工作。如果您想查看（并评论，如果您愿意的话）我的代码，我已经更新了我的原始帖子。再次感谢您的帮助。

【解决方案2】：

$(document).ready(function(){

 $(".your_table_class tr:last-child").each(function(){
    $(this).parent().next().css('background-color', $(this).css('background-color'));
 })

});

这里的.your_table_class 是类/虚拟类，用于所有下一个 div 将被着色的表中。记住 div 应该是表格的下一个元素。

此外，如果您的表格包含<tbody> 标签，那么该行将是$(this).parent().parent().next().css('background-color', $(this).css('background-color'));

【讨论】：

【解决方案3】：

jsBin demo

var neededBG = $('#children_table tr').css('background-color');   // cache the needed color
$('#children_div').css({backgroundColor: neededBG });             // use of the needed color

【讨论】：