jQuery: Select 内部和外部第一个元素都在父级中具有类名

Question

我需要 jQuery 到 select 第一个和最后一个元素，在 table 行中具有 .is 类名，不仅仅是外部的第一个和最后一个元素。常规 .next() 和 prev() 同胞 select 在这里似乎不起作用。多行是动态生成的。有人知道怎么做吗？

这是我现在的jQuery：

$('.row-months').each((i, el) => {
    $(el).find('.is:first').toggleClass('is isf'); // Indoor sow
    $(el).find('.is:last').toggleClass('is isl');
});

selecttable 个单元格是这样的：

<tr class="row-months">
  <td class="cell-month cell-jan jan1"></td>
  <td class="cell-month cell-jan jan2"></td>
  <td class="cell-month cell-feb feb1"></td>
  <td class="cell-month cell-feb feb2 is"></td> <!-- Select: First ".is" -->
  <td class="cell-month cell-mar mar1 is"></td>
  <td class="cell-month cell-mar mar2 is"></td>
  <td class="cell-month cell-apr apr1 is"></td>
  <td class="cell-month cell-apr apr2 is"></td>
  <td class="cell-month cell-may may1 is"></td>
  <td class="cell-month cell-may may2"></td>
  <td class="cell-month cell-jun jun1"></td>
  <td class="cell-month cell-jun jun2"></td>
  <td class="cell-month cell-jul jul1"></td>
  <td class="cell-month cell-jul jul2 is"></td>
  <td class="cell-month cell-aug aug1 is"></td>
  <td class="cell-month cell-aug aug2 is"></td>
  <td class="cell-month cell-sep sep1 is"></td>
  <td class="cell-month cell-sep sep2 is"></td>
  <td class="cell-month cell-oct oct1 is"></td> <!-- Select: Last ".is" -->
  <td class="cell-month cell-oct oct2"></td>
  <td class="cell-month cell-nov nov1"></td>
  <td class="cell-month cell-nov nov2"></td>
  <td class="cell-month cell-dec dec1"></td>
  <td class="cell-month cell-dec dec2"></td>
</tr>

这就是我需要 jQuery 到 select 细胞的方式：

<tr class="row-months">
  <td class="cell-month cell-jan jan1"></td>
  <td class="cell-month cell-jan jan2"></td>
  <td class="cell-month cell-feb feb1"></td>
  <td class="cell-month cell-feb feb2 is"></td> <!-- Select: Outer first ".is" -->
  <td class="cell-month cell-mar mar1 is"></td>
  <td class="cell-month cell-mar mar2 is"></td>
  <td class="cell-month cell-apr apr1 is"></td>
  <td class="cell-month cell-apr apr2 is"></td>
  <td class="cell-month cell-may may1 is"></td> <!-- Select: Inner last ".is" -->
  <td class="cell-month cell-may may2"></td>
  <td class="cell-month cell-jun jun1"></td>
  <td class="cell-month cell-jun jun2"></td>
  <td class="cell-month cell-jul jul1"></td>
  <td class="cell-month cell-jul jul2 is"></td> <!-- Select: Inner first ".is" -->
  <td class="cell-month cell-aug aug1 is"></td>
  <td class="cell-month cell-aug aug2 is"></td>
  <td class="cell-month cell-sep sep1 is"></td>
  <td class="cell-month cell-sep sep2 is"></td>
  <td class="cell-month cell-oct oct1 is"></td> <!-- Sekect: Outer last "is" -->
  <td class="cell-month cell-oct oct2"></td>
  <td class="cell-month cell-nov nov1"></td>
  <td class="cell-month cell-nov nov2"></td>
  <td class="cell-month cell-dec dec1"></td>
  <td class="cell-month cell-dec dec2"></td>
</tr>

Answer 1

利用jQuery Next Adjacent Selector (“prev + next”)

Description: Selects all next elements matching "next" that are immediately preceded by a sibling "prev".

请注意，如果 td.is 是 tr.row-months 的第一个 child 或最后一个 child，则此方法无效，在这种情况下 [=15] =] 和 :last 可以使用选择器。

$(document).ready(function() {
     
     $('.row-months').find(':not(.is) + .is').toggleClass('is isf');
     $('.row-months').find('.is + :not(.is)').prev().toggleClass('is isl');

});

td { padding: 10px; background-color: grey; }
td.isf { background-color: green; }
td.isl { background-color: red; }

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<table>
<tr class="row-months">
  <td class="cell-month cell-jan jan1"></td>
  <td class="cell-month cell-jan jan2"></td>
  <td class="cell-month cell-feb feb1"></td>
  <td class="cell-month cell-feb feb2 is"></td> <!-- Select: First ".is" -->
  <td class="cell-month cell-mar mar1 is"></td>
  <td class="cell-month cell-mar mar2 is"></td>
  <td class="cell-month cell-apr apr1 is"></td>
  <td class="cell-month cell-apr apr2 is"></td>
  <td class="cell-month cell-may may1 is"></td>
  <td class="cell-month cell-may may2"></td>
  <td class="cell-month cell-jun jun1"></td>
  <td class="cell-month cell-jun jun2"></td>
  <td class="cell-month cell-jul jul1"></td>
  <td class="cell-month cell-jul jul2 is"></td>
  <td class="cell-month cell-aug aug1 is"></td>
  <td class="cell-month cell-aug aug2 is"></td>
  <td class="cell-month cell-sep sep1 is"></td>
  <td class="cell-month cell-sep sep2 is"></td>
  <td class="cell-month cell-oct oct1 is"></td> <!-- Select: Last ".is" -->
  <td class="cell-month cell-oct oct2"></td>
  <td class="cell-month cell-nov nov1"></td>
  <td class="cell-month cell-nov nov2"></td>
  <td class="cell-month cell-dec dec1"></td>
  <td class="cell-month cell-dec dec2"></td>
</tr>
</table>

jQuery: Select 内部和外部第一个元素都在父级中具有类名

jQuery: Select both inner and outer first elements with classname within parent

jquery

html-table

selector