如何从内部元素中选择父级并通过.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> 和@987654326 @。

我试过了：

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

但它正在改变所有 td 的。

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

工作代码可以在这个日历“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

Answer 2

试试这样：

$(".markit").parent().parent().find('td').each(function() {
    $(this).not('.markit').css('border-left','4px solid #CCD');
});

JsFiddle

Answer 3

$(".markit").each( function(obj) {
    $(this).parent().nextAll().find('td').css('border-left','4px solid #CCD');
});