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

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()方法。