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

Question

<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)');

但另一种方式不行...

- Houman

---

这是一个很好的问题，我自己也搞不清楚。没有理由要踩它。这就像说没人应该问问题，而是应该看教程一样。 - Houman

在 Stack Overflow 上，我相信新手是受欢迎的，我们不应该因提问者缺乏经验而进行负评。相反地，我们应该促进学习。 - techfoobar

@techfoobar 我们应该推广学习，没错。这也是我正在做的事情。新手非常受欢迎，我已经帮助了很多人，但他们应该表现出一些努力。我不认为“如何在CSS中将某些内容设置为粗体？”这种类型的问题是受欢迎的。 - kapa

注意：以下答案都没有考虑列表可以嵌套，嵌套的列表可能有更多的li，这些li可能具有类active。这可能会导致意外情况 :)。 - kapa

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

Answer 1

$('#attached_deals_tab li.active');

- jholloman

---

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

Answer 2

这就是所需的，语法与CSS中完全相同：

$('#attached_deals_tab li.active');

- codebox

Answer 3

在指定了 ul id 后，您只需使用该类：

$("#attached_deals_tab .active");

除非你的代码中还有其他不是 li 标签的元素，而且这些元素也被应用了 active 类，否则这种情况很奇怪。

- Grant Thomas

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

阅读jQuery选择器文档也会非常有帮助。

- kapa

---

能否向投了反对票的人解释一下他的理由（除了被伤害了）？我非常乐意改进我的回答。 - kapa

Answer 5

简单，做。

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

- SexyBeast

---

这可能会选择不止li元素。 - jholloman

好的，那我可以把它设为 li.active。 - SexyBeast