javascript jQuery：是否可以从具有最多 3 个类的元素中选择只有一个类的元素？

jQuery: Is it possible to select elements with only one class from among elements with, potentially, up to 3 classes?

提问by Josh C.

For example, say I have the following:

例如，假设我有以下内容：

<span class="a b c">Has class a, b, and c</span>  
<span class="a">Has class a</span>  
<span class="b c">Has class b and c</span> 
<span class="a c">Has class a and c</span> 
<span class="a c">Has class a and c</span> 
<span class="a">Has class a</span>

Now, suppose I want to select all elements that have onlyclass a.
Meaning only the second and last spans would get selected.
Is there a simple way to do this?

现在，假设我想选择所有只有类 a 的元素。
这意味着只有第二个和最后一个spans 会被选中。
有没有一种简单的方法可以做到这一点？

回答by maxedison

$('.a').not('.b, .c')

This will select all elements with class athat do not have bor c. However, they could still have class d, e, etc. Use Phil's answer if you really only want elements with no class other than a.

这将选择所有类a没有b或的元素c。但是，它们仍然可以有 class d、e等。如果您真的只想要除了a.

回答by Merlyn Morgan-Graham

(See below for why you might not want to do exactly what's asked in the question)

（有关为什么您可能不想完全按照问题中的要求执行操作，请参见下文）

You could use the [class="a"]"attribute equals selector", though it is brittle:

您可以使用[class="a"]“属性等于选择器”，尽管它很脆弱：

$('span[class="a"]').hide();

The problem is that if you have any whitespace in your class attribute then it will break. See this fiddle: http://jsfiddle.net/c7DP7/

问题是，如果您的类属性中有任何空格，那么它就会中断。看到这个小提琴：http: //jsfiddle.net/c7DP7/

You can fix this by doing a basic query on those items using a normal class selector, then further filter them while checking only ais set (and trimming whitespace in that second filter). See this fiddle: http://jsfiddle.net/uD48E/1/

您可以通过使用普通类选择器对这些项目进行基本查询来解决此问题，然后在仅检查a设置时进一步过滤它们（并在第二个过滤器中修剪空格）。看到这个小提琴：http: //jsfiddle.net/uD48E/1/

$('.a')
    .filter(function(index){
        return $(this).attr("class").trim() == "a";
    })
    .hide();

---

---

The question looks like it is trying to make more "future proof" code, but that specific approach is more brittle. Rejecting all classes that aren't related to the current class you're filtering for can break things for reasons not related to class a(like an unrelated class dor ethat gets added later). This is important if the HTML you're applying your jQuery to might be changed in the future.

这个问题看起来像是试图制作更多“面向未来”的代码，但这种特定的方法更脆弱。拒绝所有与您要过滤的当前类a无关的类可能会因与类无关的原因而破坏事物（例如不相关的类d或e稍后添加的类）。如果您正在应用 jQuery 的 HTML 将来可能会更改，这一点很重要。

A better way to do this is to filter out only the classes that impact the meaning of class a. Allowing for that sort of flexibility is what actually makes your code more future-proof. See maxedison's answerfor the best way to do that.

一个更好的方法是只过滤掉影响 class 含义的类a。允许这种灵活性实际上使您的代码更具前瞻性。有关做到这一点的最佳方法，请参阅maxedison 的答案。

回答by Phil Klein

I suppose if you wanted to do this you could simply do:

我想如果你想这样做，你可以简单地做：

var spans = $("span[class='a']");

回答by Derek Story

Another method is removing that classes and then checking to see if any classes remain. If no, execute the function:

另一种方法是删除这些类，然后检查是否还有任何类。如果没有，执行函数：

JS Fiddle

JS小提琴

$('.a').each(function () {
    var $this = $(this);
    if (!$this.removeClass('a').attr('class').length) {
       //Execute function here
    }
});