jQuery：在父级中选择具有类名的内部和外部第一个元素

Posted 2023-03-05

【中文标题】jQuery：在父级中选择具有类名的内部和外部第一个元素

【英文标题】：jQuery: Select both inner and outer first elements with classname within parent

【发布时间】：2021-12-08 02:47:37

【问题描述】：

我需要 jQuery 在表格行中选择 both 具有 .is 类名的第一个和最后一个元素，而不仅仅是外部的第一个和最后一个元素。常规的 .next() 和 prev() 兄弟选择器似乎在这里不起作用。多行是动态生成的。有人知道怎么做吗？

这是我现在的 jQuery：

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

这是它选择表格单元格的方式：

<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 来选择单元格的方式：

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

【问题讨论】：

您是否尝试过循环遍历tds 并与之前的比较？可能不是一个“花哨”的解决方案，但会以最小的努力工作。

我以为我已经以这种方式遍历元素了。这样的循环是什么样的？

与您已有的相同：$('.row-months').each((i, tr) => $(tr).find("td.is").each((i, td) =>

我可能做错了什么。这不是应该循环遍历 TR 中的 TD 吗？ $('.row-months').each((i, tr) => $(tr).find("td.is").each((i, td) => $(el).find('.is:first').toggleClass('is isf'); $(el).find('.is:last').toggleClass('is isl'); ); );

$(el) 是什么？应该是$(td) - 或者你放在.each((i, td) => 中的任何内容 - 内部循环已经在循环tds 所以不需要.find 他们。更像if (!$(td).prev().hasClasS("is")) $(td).addClass("isf")...

【参考方案1】：

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

描述：选择所有匹配“下一个”的下一个元素 紧跟在同级“prev”之前。

请注意，如果td.is 是tr.row-months 的第一个孩子或最后一个孩子，这将不起作用，在这种情况下可以使用:first 和: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>