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合并，以便选择包含两个ul的{{1}}元素儿童元素。请记住，li选择器接受从零开始的索引（这意味着我们将使用: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; }

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

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

段：

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

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

.selected { color: #f00; }

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

1 个答案: