jquery - 如果满足 a 的某些值要求，则使用 jQuery 样式

Question

我正在学习 jQuery atm，在这里找不到我的错误......实际上“问题”很简单

如果“red”类的 td 单元格的值 > 50，则将其设为红色

jQuery代码

$(document).ready(function(){ 
var n = $(".red").val();
    if (n > 50) {
    $(".red").css("color", "red");
} 
else {
    $(".red").css("color", "blue");
    }
});

我必须在这里使用 .each() 吗？

Answer 1

首先td元素没有val属性。

需要用来.text获取文本

接下来使用parseInt将其转换为数字

  if (n > 50) {

应该是

  if (parseInt(n, 10) > 50) {

但是因为您专门将每个设置td为特定的颜色。您需要使用$.each. 您也可以使用.filter。

// Will return all the `tds` with the value
var $red = $('.red').filter(function() {
               return parseInt( $(this).text(), 10) > 50;
           });
   // Set the red elements to color red
   $red.css('color', 'red');
   // All `.red` which are not in above selector are selected
   $('.red').not($red).css('color', 'blue');

使用过滤器演示

使用每个演示

Answer 2

这个应该做...

现场演示：小提琴

HTML

<table id="theTable" border="1">
    <tr>
        <td class="red">5</td><td class="red">25</td><td class="red">50</td><td class="red">51</td><td class="notRed">105</td>
    </tr>
</table>

jQuery

$(document).ready(function(){
    $('#theTable td.red').each(function(){
        var cellVal = parseInt($(this).text())
        if(cellVal > 50)
            $(this).css("background-color","red");
        else
            $(this).css("background-color","blue");
    });
});