如何选择仅与特定类关联的 HTML 元素答案

【问题标题】：How can you select an HTML element associated only with a specific class如何选择仅与特定类关联的 HTML 元素
【发布时间】：2014-11-14 21:46:38
【问题描述】：

我在 HTML 中有以下 3 个元素：

<span class="a b"></span>
<span class="a"></span>
<span class="a b"></span>

我想选择只有“a”类的元素。如果我只是做$("span.a")，那么所有三个元素都会被选中。此外，我想在 for 循环中执行此操作，因为基于此我必须进行一些其他计算。

这似乎是一个简单的问题，但由于某种原因我无法弄清楚。

【问题讨论】：

标签： jquery css class

【解决方案1】：

通过class属性选择元素：

$("span[class='a']")

【讨论】：

这是您希望逐字检查类属性而不是使用类选择器的少数情况之一。
根据 OP 打算如何处理 for 循环，OP 可以合并 each(): $("span[class='a']").each(function(){ $(this).attr('class'); //a });

【解决方案2】：

与@dfsq 不同的方法

$('.a:not(.b)')

选择所有具有类a 而没有类b。这也适用于纯 CSS 选择器。

.a:not(.b) {
    color: red;
}

如果您想要“完全是 .a，仅此而已”，那么 dfsq 的解决方案非常棒。如果您希望更灵活地组合类，那么这可能会更好。

这个 sn-p 演示了它：

.a:not(.b) {
    color: red;
}

<span class="a b">This span has class="a b"</span><br>
<span class="a">This one has only class="a"</span><br>
<span class="a b">This also has class="a b"</span><br>

【讨论】：