javascript - 每 10 tr 使用 10n jquery

Question

$('tr.include:nth-child(10n)').addClass('bottom');

.bottom {
  color: red;
}
.skip {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>




  <tr class='skip'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='skip'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='skip'>
    <td>First</td>
    <td>Second</td>
  </tr>

  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>

</table>

我想在我的表中选择每 10 个 tr，前 10 个工作正常，下一个不行。(在前 10 个之后，我为标题动态添加 3 个 tr)接下来的 10 个受标题影响，我没有选择下一个10. 我已经指定了要选择的类(class)，但它仍然只从所述类(class)中选择 7 个。它包括添加的标题。我想跳过添加的标题。 我想要的只是从包含的类(class)中每 10 个选择一次。 它不应该包括跳过的类(class)

Answer 1

您可以使用手动过滤器

$('tr.include').filter(function(i) {
  return (i + 1) % 10 == 0
}).addClass('bottom');

.bottom {
  color: red;
}
.skip {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>




  <tr class='skip'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='skip'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='skip'>
    <td>First</td>
    <td>Second</td>
  </tr>

  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>
  <tr class='include'>
    <td>First</td>
    <td>Second</td>
  </tr>

</table>