用于匹配具有 N 行的表的 JQuery 选择器

Question

我有一个带有两个表的 div。我只想从具有 N 行的一个表中选择行。

在 XPath 中我会使用:

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

是否有一个 jQuery 选择器表达式可以做同样的事情？

这是 HTML 片段:

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

我希望这可以在单个 jQuery 选择器表达式中完成(例如，在 Interactive JQuery Tester 中理解)。我的出发点是:

'div.div1 ul li'

但这也会从第一个只有 1 行的表中选择行。

当然，“正确的方法”是在 HTML 中添加 ID 或其他内容，以便可以唯一地标识该表，但是在这种情况下，我无法控制从中获取数据的 HTML。我可以判断使用多个表中的哪一个的唯一方法是根据行数。

Answer 1

是的，您可以使用单个 jQuery 选择器来完成此操作。

就您而言，您可以将 :has() selector 组合起来，:eq() selector ，以及 :last-child pseudo class为了选择具有两个 li 子元素的 ul 元素。请记住，:eq() 选择器接受从零开始的索引(这意味着我们将使用 1 索引来选择第二个 li 元素)。然后使用 :last-child 伪类来确保第二个 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>