Question

我有一个table，其中tr被分配class和js。

我想要反映一下div。但是，我的each()功能似乎无法正常工作。

我有以下JS：

$("table.result tr").each(function() {
    if($(this).hasClass("red")) {
        $("#color").addClass("red");
        //bunch of other things
    } else {
        $("#color").addClass("green");
        //bunch of other things
    }
});

这是我的标记：

<table class="result">
   <tr class="red">
       <th>Name</th>
       <th>Result</th>
   </tr>
   <tr class="red">
       <td>John Doe</td>
       <td>Pass</td>
   </tr>
   <tr class="red">
       <td>Johnathan Doe</td>
       <td>Pass</td>
   </tr>
   <tr class="red">
       <td>Jane Doe</td>
       <td>Fail</td>
   </tr>
</table>
<div id="color"></div>

我尝试做的是，如果所有tr都有class red，那么我才希望div拥有red green的等级也应为jQuery。但tr仅在最后class上测试它是否有tr。

但它似乎并没有起作用。这可能是一个非常小的错误，但我无法弄清楚。这是一个jsfiddle：https://jsfiddle.net/okvv330L/6/

如您所见，由于一个class没有red div，green应为tr。但它只检查最后一个onResume()并以此为基础。

谢谢！

Answer 1

这是因为原始样式覆盖了添加的类的样式。最简单的解决方案是添加更高的特性，如

.red, #color.red {
    background: red;
}

<强>更新

我想要做的是，如果所有的tr都有红色的类，那么给div一个红色的其他颜色给它绿色。

$(function() {
  $("#color").addClass("green");
  $("table.result:not(:has(tr:not(.red))) + #color").addClass("red");
});

#color {
  height: 50px;
  width: 50px;
  background: #ccc;
}
.green,
#color.green{
  background: green;
}
.red,
#color.red {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table class="result">
  <tr class="red">
    <th>Name</th>
    <th>Result</th>
  </tr>
  <tr class="green">
    <td>John Doe</td>
    <td>Pass</td>
  </tr>
  <tr class="red">
    <td>Johnathan Doe</td>
    <td>Pass</td>
  </tr>
  <tr class="red">
    <td>Jane Doe</td>
    <td>Fail</td>
  </tr>
</table>
<div id="color"></div>

Answer 2

它完美地工作，因为它在你的div中添加了.red，但是它没有按照css specificity获取css，因为id具有比class更高的特异性

所以，你可以使用：

#color.red{
  background-color: #f00;
}

或者，您可以使用！important：

.red{
   color: #f00 !important;
}

your jsfiddle

根据您的评论，我更新了fiddle。您可以这样使用：

$(function() {
    if($("table.result tr.red").length == $("table.result tr").length) {
            $("#color").addClass("red");
        } else {
            $("#color").addClass("green");
        }
});

Answer 3

change your css.use important tag
.green {
    background: green !important;
}
.red {
    background: red !important;
}

Answer 4

更新：由于您希望仅在所有red具有班级#color

的情况下才将班级tr分配给red

在这种情况下，使用循环将是错误的，因为它将始终使用最后tr的状态。

此外，您遇到了css specificity的问题，您使用ID属性分配了背景颜色，然后优先于稍后分配的类规则，因此您必须使类规则更具体通过使用id规则和类规则的组合。

＆＃13;

$(function() {
  var green = $("table.result tr").is(':not(.red)');
  $("#color").toggleClass("green", green);
  $("#color").toggleClass("red", !green);
});

＆＃13;

#color {
  height: 50px;
  width: 50px;
  background: #ccc;
}
.green,
#color.green {
  background: green;
}
.red,
#color.red {
  background: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="result">
  <tr class="red">
    <th>Name</th>
    <th>Result</th>
  </tr>
  <tr class="red">
    <td>John Doe</td>
    <td>Pass</td>
  </tr>
  <tr class="red">
    <td>Johnathan Doe</td>
    <td>Pass</td>
  </tr>
  <tr class="red">
    <td>Jane Doe</td>
    <td>Fail</td>
  </tr>
</table>
<div id="color"></div>

＆＃13;

Answer 5

我使用以下代码完成了这项工作：

var $rowCount = $('.result tr').length;
var $rowFill = 0;
$(".result tr").each(function() {
    if($(this).is('.red')) {
        $rowFill = $rowFill + 1;
    }
});
if($rowFill == $rowCount) {
    $('#color').addClass('red');
} else {
    $('#color').addClass('green');
}

由于each()仅测试最后一行;我得到它以匹配计数与行数。所以现在，它似乎工作正常。

jQuery：如果每个tr都有类，则运行函数

5 个答案: