每 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>

我想 select 在我的 table 中每 10 个 tr 前 10 个工作正常，下一个就不行。（在前 10 个之后我动态地为 header 添加 3 个 tr）接下来的 10 个受到 header 的影响，我不会 select 对接下来的 10 个进行 select。我已经指定 class 被 selected 但它仍然只从中选择 7 个表示class。它包括添加的 header。我想跳过添加的 header。 我想要的只是select每10个从class包含。不应该包含class跳过[=25] =]

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>

每 10 tr 使用 10n jquery

every 10 tr using 10n jquery

javascript

jquery

jquery-selectors