jQuery: 运行函数如果每个 tr 有 class

Question

我有一个 table，其中 tr 正在使用 js 分配 class。

我还有一个 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 的 class 也应该是 green。但是 jQuery 只在最后一个 tr 上测试它是否有 class。

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

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

谢谢！

Answer 1

这是因为原始样式覆盖了添加的样式 class。最简单的解决方案是添加更高的规格，例如

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

更新

What I'm trying to do is, if all tr's have the class red, then give the div a class of red else give it green.

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

更新：因为你想将 class red 分配给 #color 只有当所有 tr 都有 class red

在那种情况下使用循环是错误的，因为它总是使用最后一个 tr.

的状态

另外 css specificity 也有问题，您使用 ID 属性分配了背景颜色，然后它将优先于您稍后分配的 class 规则，所以您必须结合使用 id 规则和 class 规则来使 class 规则更加具体。

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

#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.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>

Answer 3

它在你的 div 中添加 class .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 4

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

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 有 class

jQuery: Run function if each tr has class

javascript

each

jquery

jQuery: 运行 函数如果每个 tr 有 class

jQuery: Run function if each tr has class

javascript

each

jquery

jQuery: 运行函数如果每个 tr 有 class