javascript - 将一个类添加到所有下一个元素，直到有类的子元素

Question

我正在尝试使用 jQuery 添加一个“bg-info”类，以在奇数 tr 之后的所有 tr 中添加一个子 > 子类“test”。 “bg-info”类应该在看到带有子 > 子类“test”的 tr 时停止应用，然后在看到下一个带有子 > 子类“test”的奇数 tr 时继续应用。金额是动态的，因此它不能依赖于特定数量的 tr。我尝试了很多组合，但似乎无法使其正常工作。请参阅 JSFiddle。提前致谢:)

JSFiddle

https://jsfiddle.net/vrpuahue/4/

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>

CSS

.bg-info {
  background: grey;
}

JS

$('tbody tr td .test:odd').parent().parent().addClass('bg-info');

Answer 1

使用 nextUntil方法可以在这种情况下帮助您。

我为所有偶数和奇数 parent 添加一个类，然后突出显示所需的特定元素。

demo

$('.test:odd').parents('tr').addClass('odd');
$('.test:even').parents('tr').addClass('even');
$('.odd').nextUntil('.even').addClass('highlight');

.highlight {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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>