Question

我有一个表，每行可以包含可变数量的<td>个元素，但每行最多有3个<td>个元素。假设我想选择少于3个<td>元素的行并将它们分配给变量，有没有办法只用jQuery选择这些行？我知道我可以使用迭代遍历每一行的东西，如下所示：

var rows = $("tr").filter(function() {
  return $(this).children().length < 3
});

rows.css("background-color", "blue");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

有没有办法只用jQuery选择器和方法（即.siblings()或.parents()）来做同样的事情？

Here's我给出的一个例子的JSFiddle。我找了一个类似的问题，但找不到这样的东西，所以我希望有人会有一些想法，如果可能的话。

Answer 1

使用:not()，:has()和:eq()伪类选择器的组合。

var rows = $("tr:not(:has(:eq(2)))");

rows.css("background-color", "blue");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

仅供参考：根据您的需要，您可以使用:nth-child()或:nth-of-type()代替:eq()方法。

jQuery选择器，它获取少于n个子元素的所有父元素

1 个答案: