AJAX успех для значения массива $ .each НЕ равно значению

Question

У меня непрерывный вызов AJAX, возвращающий массив идентификаторов, таких как (1, 17, 20), каждые несколько секунд, которые я использую для изменения классов строк таблицы с идентификатором данных, равным этим значениям, что работает нормально ,

Но мне нужно также воздействовать на те строки, чей идентификатор данных НЕ равен одному из этих значений.

Эта часть работает.

        success: function(data){ 
        $.each((data), function(index, value){
           var row = $("tr[data-id="+value+"]");
           $(row).addClass("ready");
           });
          }

Однако, когда я заменяю строку var на $("tr[data-id!="+value+"]"), она применяет изменение класса ко всем строкам таблицы. Очевидно, есть конфликт или неправильный процесс, который я применяю, но понятия не имею, где! Любая помощь очень ценится

Answer 1

Самый простой способ сделать это - удалить класс из всех элементов tr, прежде чем добавлять его к необходимым. Также обратите внимание, что вы можете использовать map() для создания единственной строки селектора со всеми целевыми tr элементами, например:

success: function(data) {
  let filterSelector = data.map(v => `tr[data-id="${v}"]`).join(',');
  $('tr').removeClass('ready').filter(filterSelector).addClass('ready');
}

Рабочий пример:

setInterval(() => {
  // mock AJAX response
  let data = [
    Math.floor(Math.random() * 10),
    Math.floor(Math.random() * 10),
    Math.floor(Math.random() * 10)
  ];

  let filterSelector = data.map(v => `tr[data-id="${v}"]`).join(',');
  $('tr').removeClass('ready').filter(filterSelector).addClass('ready');
}, 1000);

tr.ready {
  background-color: #0C0;
  color: #FFF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr data-id="0"><td>A</td></tr>
    <tr data-id="1"><td>B</td></tr>
    <tr data-id="2"><td>C</td></tr>
    <tr data-id="3"><td>D</td></tr>
    <tr data-id="5"><td>E</td></tr>
    <tr data-id="6"><td>F</td></tr>
    <tr data-id="7"><td>G</td></tr>
    <tr data-id="8"><td>H</td></tr>
    <tr data-id="9"><td>I</td></tr>
    <tr data-id="10"><td>J</td></tr>
  </tbody>  
</table>