Javascript 向所有下一个元素添加一个类,直到该类的子元素

Javascript 向所有下一个元素添加一个类,直到该类的子元素,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在尝试使用jQuery添加一个“bg info”类,将其添加到“test”的child>child类的奇数tr之后的所有tr中。“bg info”类应在看到子类为“test”的tr>子类时停止应用,然后在看到下一个奇数tr且子类为“test”的tr>子类时继续应用。该金额是动态的,因此不能依赖于特定数量的tr。我尝试了许多组合,但似乎无法使其正确工作。见JSFiddle。提前感谢:) JSFiddle HTML <table> <thead> <t

我正在尝试使用jQuery添加一个“bg info”类,将其添加到“test”的child>child类的奇数tr之后的所有tr中。“bg info”类应在看到子类为“test”的tr>子类时停止应用,然后在看到下一个奇数tr且子类为“test”的tr>子类时继续应用。该金额是动态的,因此不能依赖于特定数量的tr。我尝试了许多组合,但似乎无法使其正确工作。见JSFiddle。提前感谢:)

JSFiddle

HTML

<table>
  <thead>
    <tr>
      <th>Test</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="test">Test1</div>
      </td>
    </tr>
    <tr>
      <td>Do Not Highlight</td>
    </tr>
    <tr>
      <td>Do Not Highlight</td>
    </tr>
    <tr>
      <td>Do Not Highlight</td>
    </tr>
    <tr>
      <td>
        <div class="test">Test2</div>
      </td>
    </tr>
    <tr>
      <td>Highlight</td>
    </tr>
    <tr>
      <td>Highlight</td>
    </tr>
    <tr>
      <td>Highlight</td>
    </tr>
    <tr>
      <td>
        <div class="test">Test3</div>
      </td>
    </tr>
    <tr>
      <td>Do Not Highlight</td>
    </tr>
    <tr>
      <td>Do Not Highlight</td>
    </tr>
    <tr>
      <td>Do Not Highlight</td>
    </tr>
    <tr>
      <td>
        <div class="test">Test4</div>
      </td>
    </tr>
    <tr>
      <td>Highlight</td>
    </tr>
    <tr>
      <td>Highlight</td>
    </tr>
    <tr>
      <td>Highlight</td>
    </tr>
    <tr>
      <td>
        <div class="test">Test5</div>
      </td>
    </tr>
    <tr>
      <td>Do Not Highlight</td>
    </tr>
    <tr>
      <td>Do Not Highlight</td>
    </tr>
    <tr>
      <td>Do Not Highlight</td>
    </tr>
  </tbody>
</table>
JS

.bg-info {
  background: grey;
}
$('tbody tr td .test:odd').parent().parent().addClass('bg-info');
在这种情况下,使用方法可以帮助您

我向所有偶数和奇数父级添加一个类,然后突出显示所需的特定元素

$('.test:odd').parents('tr').addClass('odd');
$('.test:偶数')。parents('tr')。addClass('偶数');
$('.odd').nextUntil('.偶数').addClass('highlight')
。突出显示{
背景:黄色;
}

试验
测试1
不要突出显示
不要突出显示
不要突出显示
测试2
突出
突出
突出
测试3
不要突出显示
不要突出显示
不要突出显示
测试4
突出
突出
突出
测试5
不要突出显示
不要突出显示
不要突出显示

我觉得有更好的方法来解释这一点并展示示例(例如,在你的小提琴中,它可以说
这应该突出显示
/
这不应该
)一个好主意会使这种更改成为一种要求,即在奇数
tr
元素之后添加
className
tr
元素,该元素包含具有
类的
.test
之类的元素?(我编辑使tr包含.test类不变)是的,对于最简单的解决方案,我喜欢它。我会在我的代码中测试它,如果一切顺利,我会接受它。谢谢,很好用。谢谢。我不知道为什么我没有想到仅仅添加类。很简单。:)@user262430很高兴能帮忙!