jquery - 使用 jQuery 动态更新 CSS 属性

Question

我有以下 jQuery 代码，但它没有更改在 CSS 中设置为红色的负数的颜色，但在控制台中，预期的颜色已得到纠正。

这是一个表格，其中的行是通过 AJAX 动态创建的。

在这里，我的 jQuery 代码使用 AJAX 处理从数据库检索的数据。

$.each(data, function (q, z) {
    var rem = z.remaining;
    console.log('rem ' + rem);
    $("#tbody").append('<tr><td><input type="checkbox" name="tick" id="tick"></td><td class="id">' + z.id + '</td><td class="title">' + z.title + '</td><td class="name">' + z.name + '</td><td class="surname">' + z.surname + '<span class="mystyle"> (' + rem + ')</span>' + '</td><td class="sessions"><select name="sessions" id="sessions" class="sesVal"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="4">4</option></select></td><td class="amount"></td></tr>');
    if(rem >= 1) {
        $(".mystyle").css('color','green');
        console.log('green');
    }
    if(rem < 0) {
        $(".mystyle").css('color','red');
        console.log('red');
    }
});

下面是页面和浏览器控制台的截图；

Answer 1

要获得预期结果，请使用 .eq() 的以下选项将样式应用于该特定行，查看此 eq(index) 链接以获取更多详细信息 - https://api.jquery.com/eq-selector/

$(".mystyle:eq("+q+")")

codepen - https://codepen.io/nagasai/pen/pOMBXq

var data = [{
  "remaining":-1,
  "id":1,
  "title":"test",
  "surname":"zzz",
  "name":"yyy"
},{
  "remaining":10,
  "id":2,
  "title":"test2",
  "surname":"zzz2",
  "name":"yyy2"
}]

$.each(data, function (q, z) {
                    var rem = z.remaining;
                    console.log('rem ' + rem, q);
                     $("#tbody").append('<tr><td><input type="checkbox" name="tick" id="tick"></td><td class="id">' + z.id + '</td><td class="title">' + z.title + '</td><td class="name">' + z.name + '</td><td class="surname">' + z.surname + '<span class="mystyle"> (' + rem + ')</span>' + '</td><td class="sessions"><select name="sessions" id="sessions" class="sesVal"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="4">4</option></select></td><td class="amount"></td></tr>');
                    if(rem >= 1) {
                        $(".mystyle:eq("+q+")").css('color','green');
                        console.log('green');
                    }
                     if(rem < 0) {
                        $(".mystyle:eq("+q+")").css('color','red');
                        console.log('red');
                     }
                    }); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody id="tbody"></tbody>
</table>