将一个类添加到所有下一个元素，直到该类的子元素为止

Add a class to all next element until child with class

本文关键字：元素 下一个 一个 添加      更新时间：2023-09-26

我正试图使用jQuery将一个"bg-info"类添加到奇数tr之后的所有tr中，子类为"test"。当看到child>child类为"test"的tr时，"bg-info"类应停止应用，然后当看到child>child类的下一个奇数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');

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

我将一个类添加到所有偶数和奇数父类，然后highlight所需的特定元素。

演示

$('.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>

相关文章：