JQuery 选择器匹配 table 有 N 行

Question

我有一个 div 和两个 table。我想 select 只有 table 有 N 行的行。

在 XPath 中我会使用：

//div[@class="div1"]/table[count(tr) = 2]/tr

是否有 jQuery select 或表达式可以做同样的事情？

这是 HTML 片段：

<div>
  <div class="div1">
    <ul>
      <li>Line 1</li>
    </ul>
    <ul>
      <li>Line 1</li>
      <li>Line 2</li>
    </ul>
  </div>      
</div>

我希望这可以在单个 jQuery select 或表达式中完成（例如，在 Interactive JQuery Tester 中理解）。我的出发点是：

'div.div1 ul li'

但这也 select 第一个 table 的行只有 1 行。

当然，"right way" 是为 HTML 添加 ID 或其他东西，以便 table 可以被唯一识别，但是在这种情况下我没有控制 HTML 我从中获取数据。我可以判断要使用多个 table 中的哪一个的唯一方法是根据行数。

Answer 1

是的，您可以使用单个 jQuery select 或。

在您的情况下，您可以组合 :has() selector, the :eq() selector, and the :last-child pseudo class 以便 select 具有两个 li 子元素的 ul 元素。请记住 :eq() selector 接受从零开始的索引（这意味着我们将使用 1 的索引以便 select 第二个 li元素）。然后使用 :last-child 伪 class 以确保第二个 li 实际上是最后一个子元素。

$('.div1 ul:has(li:eq(1):last-child)')

片段：

$('.div1 ul:has(li:eq(1):last-child)').addClass('selected');

.selected { color: #f00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <div class="div1">
    <ul>
      <li>Line 1</li>
    </ul>
    <ul>
      <li>Line 1</li>
      <li>Line 2</li>
    </ul>
    <ul>
      <li>Line 1</li>
      <li>Line 2</li>
      <li>Line 3</li>
    </ul>
  </div>      
</div>

或者，您也可以使用 :nth-child() pseudo class。

$('.div1 ul:has(li:nth-child(2):last-child)')

片段：

$('.div1 ul:has(li:nth-child(2):last-child)').addClass('selected');

.selected { color: #f00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <div class="div1">
    <ul>
      <li>Line 1</li>
    </ul>
    <ul>
      <li>Line 1</li>
      <li>Line 2</li>
    </ul>
    <ul>
      <li>Line 1</li>
      <li>Line 2</li>
      <li>Line 3</li>
    </ul>
  </div>      
</div>

JQuery 选择器匹配 table 有 N 行

JQuery selector to match table having N rows

jquery

jquery-selectors