Динамическое обновление свойств CSS с помощью jQuery

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

класс не уникален, то есть более одного элемента могут иметь одно и то же имя.Поэтому, если вы решите изменить цвет элемента, используя имя класса, то все элементы с этим именем класса изменят цвет.

if(rem >= 1) {
    $(".mystyle").css('color','green');
    console.log('green');
}
if(rem < 0) {
    $(".mystyle").css('color','red');
    console.log('red');
}

Здесь вы сообщаете коду изменить все элементы с именем класса mystyle на зеленый, если rem больше 1, или красный, если он меньше единицы.

Вы можете добавить уникальный идентификатор к нему:

<span class="mystyle"+rem> (' + rem + ')</span>
if(rem >= 1) {
    $(".mystyle" + rem).css('color','green');
    console.log('green');
}
if(rem < 0) {
    $(".mystyle" + rem).css('color','red');
    console.log('red');
}

Answer 2

Вот как я бы это сделал:

$.each(data, function (q, z) {
  var rem = z.remaining;
  var colorClass = '';
  if(rem >= 1) {
    colorClass = 'green';
  } else if(rem < 0) {
    colorClass = 'red';
  }
  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="' + colorClass + '"> (' + 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>');
});

Ваш недавно добавленный CSS:

.red { color: red; }
.green { color: green; }

Answer 3

Чтобы достичь ожидаемого результата, используйте опцию ниже .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>