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

I need jQuery to select both first and last elements with the .is classname in a table row, not just the outer first and last elements. Regular .next() and prev() sibling selectors don't seem to work here. Multiple rows are generated dynamically. Does anybody have an idea how to do this?

This is my jQuery right now:

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

This is how it selects the table cells:

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

This is how I need jQuery to select the cells:

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

CodePudding user response：

Make use of jQuery Next Adjacent Selector (“prev next”)

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

Do note, this won't work if the td.is is the very first child or very last child of tr.row-months, in that case :first and :last selector could be used.

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