检查 table 行中 class 的第一个或最后一个兄弟姐妹 (jQuery)

Question

这让我忙了几天。如何检测 <tr> 中的第一个或最后一个 <td>，class 名称为“is”，然后将此 class 更改为“isf”（第一行）或“是”（最后一行），保持中间的“是”class原样？

到目前为止，我使用 jQuery 得到了这个，但没有任何反应：

$( document ).ready(function() {
  if ($("td.is").prevAll("td.is") = null) {
    $("td.is").toggleClass('is isf');
  } else if ($("td.is").nextAll("td.is") = null) {
    $("td.is").toggleClass('is isl');
  }
});

将 .prevAll() 更改为 .prev() 对我来说没有用。我有多个 table 行，在不同的单元格上带有“是”class。这是 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"></td>
  <td class="cell-month cell-mar mar1"></td>
  <td class="cell-month cell-mar mar2 is"></td> <!-- FIRST "is" class in row, change "is" to "isf" -->
  <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 is"></td>
  <td class="cell-month cell-jun jun1 is"></td>
  <td class="cell-month cell-jun jun2 is"></td>
  <td class="cell-month cell-jul jul1 is"></td>
  <td class="cell-month cell-jul jul2 is"></td>
  <td class="cell-month cell-aug aug1 is"></td> <!-- LAST "is" class in row, change "is" to "isl" -->
  <td class="cell-month cell-aug aug2"></td>
  <td class="cell-month cell-sep sep1"></td>
  <td class="cell-month cell-sep sep2"></td>
  <td class="cell-month cell-oct oct1"></td>
  <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

要实现这一点，您可以遍历每个 tr 并使用 :first 和 :last 选择器检索相关的 .is 元素并更新它们的类:

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

td { 
  width: 30px; 
  vertical-align: top;
}
.is { color: #CCC; }
.isf { color: #0C0; }
.isl { color: #C00; }

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

检查 table 行中 class 的第一个或最后一个兄弟姐妹 (jQuery)

Check for first or last sibling with class in table row (jQuery)

jquery

html-table

classname