Быстрый Jquery вопрос, касающийся пропуска родительских элементов и addClasses для childs

Question

У меня есть быстрая проблема, которую мне нужно решить, и кроме написания JQuery, я думаю, было бы проще, если бы я объяснил это очень основательно c. Начиная с класса «сегодня», как я могу добавить класс «красный» к следующим 3 элементам после сегодняшнего класса и обойти родитель? Когда я использую функцию next (), она останавливается в конце тд. Любая помощь будет оценена!

Jquery - я знаю, как добавить один к следующему элементу, но не к следующему 3

$('tr td.today').next().addClass('red');

HTML

<table>
 <tr>
  <td>1</td>
  <td class="today">2</td>
  <td>3</td>
</tr>
<tr>
 <td>4</td>
 <td>5</td>
 <td>6</td>
</tr>

Так что, если я хочу добавить «красный» к следующим 3 элементам td после сегодняшнего класса, это будет выглядеть так:

<table>
 <tr>
  <td>1</td>
  <td class="todays">2</td>
  <td class="red">3</td>
 </tr>
 <tr>
  <td class="red">4</td>
  <td class="red">5</td>
  <td>6</td>
</tr>

Answer 1

Есть несколько способов сделать это. Можно было бы использовать индекс элемента .today вместе с slice() для выбора правильных элементов.

var $td = $('td'); // Collection of all TDs
var todayIndex = $td.index($('.today')); // The index of .today within the collection

$td = $td.slice(todayIndex + 1, todayIndex + 4); // New collection containing the next three TDs

$td.addClass('red');

.today {
  color: green;
}

.red {
  color: red;
}

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

<table>
<tr>
    <td>-3</td>
    <td>-2</td>
    <td>-1</td>
  </tr>
  <tr>
    <td>1</td>
    <td class="today">2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>