jquery - 如何从内部元素中选择父元素并通过 .each() 将样式仅应用于该父元素的其他内部元素？

Question

嗯，问题标题不容易表述。也许编辑可以改进它？

情况:我有 4 个具有相同类名的表:

<table class="tb">
  <tr><td class="markit">1a</td></tr>
  <tr><td>1b</td></tr>
  <tr><td>1c</td></tr>
</table>
<table class="tb">
  <tr><td>2a</td></tr>
  <tr><td>2b</td></tr>
</table>
<table class="tb">
  <tr><td>3a</td></tr>
  <tr><td>3b</td></tr>
</table>
<table class="tb">
  <tr><td class="markit">4a</td></tr>
  <tr><td>4b</td></tr>
</table>

我希望 jquery 更改下面所有单元格的边框颜色 .markit在同一个表中，即<td>1b</td>和<td>1c</td>和<td>4b</td> .

我尝试过:

$(".markit").each( function() {
  $('td:nth-child('+($(this).index()+1)+')').css('border-left','4px solid #CCD');
});

但它正在改变所有td。

我需要告诉 jquery 仅使用当前父级的 td，但我不知道如何设置选择器。

可以在此日历“Ferienkalendar”中看到工作代码，请参阅今天的专栏。

Answer 1

不是有史以来最漂亮的代码，但试试这个:

$("table .markit").parent('tr').nextAll().find('td').css('border-left', '4px solid #CCD');

Example fiddle

此代码查找所有 .markit 元素，然后查找 markit 的所有兄弟 tr 的 td 元素> 并向它们添加样式。我建议将该样式设置为一个类，并使用 addClass 以使将来的维护更加容易。您还可以使用 addBack() 包含原始 .markit 元素:

$("table .markit").parent('tr').nextAll().addBack().find('td').addClass('after-markit');

Example including original markit element