如何选择具有特定类的 li？

Posted 2023-05-09

【中文标题】如何选择具有特定类的 li？

【英文标题】：How to select a li with a specific class?

【发布时间】：2012-09-18 05:29:30

【问题描述】：

<ul id="attached_deals_tab" class="nav nav-tabs">
  <li class="active">
    <a data-toggle="tab" href="#Test1">Test1</a>
  </li>
  <li class="">
    <a data-toggle="tab" href="#Test2">Test2</a>
  </li>
</ul>

使用这样的 jquery，我可以说让我获得所有列表项：

$('#attached_deals_tab li');

但是我怎么能说只显示具有 class="active" 的 li ？请在一行中。

我知道如何否定它：

$('#attached_deals_tab li:not(.active)');

但反之则不然……

【问题讨论】：

这是一个有效的问题，我无法弄清楚。没有理由对此表示反对。这就像说没有人应该问问题而是做教程。

在 SO，我相信，欢迎新手，我们不应该因为提问的人缺乏经验而投反对票。相反，我们应该促进学习。

@techfoobar 我们应该促进学习，是的。这就是我正在做的事情。新手很受欢迎，我帮助了很多人，但他们应该表现出一些努力。我不认为“如何在 CSS 中将某些内容设置为粗体？”欢迎提问。

注意：没有一个答案关心列表可以嵌套的可能性，嵌套列表可以有更多 lis 可能有类 active。这可能会带来惊喜:)。

@Kave - 正如 bažmegakapa 指出的那样，答案没有考虑嵌套。仅使用 #attached_deals_tab > li.active 过滤直系子级。

【参考方案1】：

$('#attached_deals_tab li.active');

【讨论】：

为了提高效率，还可以使用 $('#attached_deals_tab').find('li.active');

【参考方案2】：

这样就可以了，语法和CSS中的一样：

$('#attached_deals_tab li.active');

【参考方案3】：

一旦指定了ul id，您就可以使用该类：

$("#attached_deals_tab .active");

除非你有除lis 之外的其他东西，而且还有一些东西也被应用到active 类，这会很奇怪。

【参考方案4】：

您应该使用子选择器为将来可能的嵌套列表准备代码：

$('#attached_deals_tab > .active')

它将仅选择直接子级。根据规范，ul 只能有li 元素作为其子元素，因此在使用子选择器时，.active 就足够了，无需指定li.active。

通过嵌套列表，我的意思是这样的：

<ul id="attached_deals_tab">
    <li class="active"></li>
    <li></li>
    <li>
        <ul>
            <li class="active"></li>
            <li></li>
        </ul>
    </li>
</ul>

阅读documentation on jQuery Selectors 也会有很大帮助。

【讨论】：

投反对票的人能否解释他的原因（除了受伤之外）？我总是很乐意改进我的答案。

【参考方案5】：

简单，做

$('#attached_deals_tab li.active').(...)

【讨论】：

这有可能选择不止 li 元素

好的，那我就可以了li.active。