Как изменить класс элементов в соседних строках таблицы HTML с помощью селектора nextAll () jQuery

Question

Когда я пытался изменить класс с помощью селектора .nextAll(':lt(3)') jQuery, я столкнулся с проблемой.

Класс не изменяется в новых строках таблиц html. Если я правильно понимаю, этот метод применяет изменение класса следующих 3 ячеек.

Есть ли способ исправить это?

$(function() {
  $("td").click(function() {
    $('td').removeClass('outpatient'); //If you want to reset in each click
    $(this).nextAll(':lt(3)').addClass('outpatient');
  });
});

table td {
  width: 20px;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  border: 1px solid gray;
  text-align: center;
  padding: 5px;
  cursor: pointer;
}
.outpatient {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>

Answer 1

Документация по API для .nextAll()

Получить все последующие элементы каждого элемента в наборе соответствующих элементов, дополнительно отфильтрованные селектором

Так как следующий ряд не является элементом td, вы должны нацеливаться на следующий ряд отдельно. Для этого вы можете подсчитать, сколько элементов было выбрано с помощью .nextAll(), и раскрасить остальные необходимые элементы в следующем ряду.

$(function() {
  $("td").click(function() {
    $('td').removeClass('outpatient'); //If you want to reset in each click
    $(this).nextAll(':lt(3)').addClass('outpatient');
    
    fromNextRow = 3 - $(this).nextAll(':lt(3)').length;
    $(this).parent().next().children(':lt('+ fromNextRow +')').addClass('outpatient');
  });
});

table td {
  width: 20px;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
  border: 1px solid gray;
  text-align: center;
  padding: 5px;
  cursor: pointer;
}
.outpatient {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>