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

Question

This is keeping me busy for a couple of days. How do I detect the first or last <td> within a <tr> with classname "is" and then change this class to "isf" (first in row) or "is" (last in row), keeping the middle "is" classes as they are?

So far I've got this using jQuery but nothing happens:

$( 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');
  }
});

Changing .prevAll() to .prev() does not do the trick for me. I've got multiple table rows with the "is" class on different cells. This is what the table row looks like:

<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>

score 2 · Accepted Answer · answered Oct 19 '21 at 08:25

To achieve this you can loop through each tr and use the :first and :last selectors to retrieve the relevant .is elements and update their classes:

$('.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>

Perfect, many thanks! Although I have one last question about this... What do I do if one table row has multiple firsts and lasts? Meaning the table cells look something like this [o][x][x][x][o][o][x][x][x][x][o][o] where 'x' contains the classname and 'o' does not? — Al John, Oct 19 '21 at 08:33
For the *first*, you can do with css `.cell-month:not(.is) + .cell-month.is { color: red; }` (and thus with jquery selector). Otherwise, probably easiest just to loop through and store the current (which becomes previous on next iteration) and compare. — freedomn-m, Oct 19 '21 at 08:41
For future, future reference, there (may) also be: `:nth-child(1 of .is)` see [this question](https://stackoverflow.com/a/31415015/2181514) for more info. — freedomn-m, Oct 19 '21 at 08:44

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

1 Answers1