jQuery:是否可以选择元素中只有一个类的元素,有可能多达3个类?
问题描述:
例如,假设我有以下几点:jQuery:是否可以选择元素中只有一个类的元素,有可能多达3个类?
<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>
现在,假设我要选择具有只有类的所有元素。
只有第二个也是最后一个span
才会被选中。
有没有简单的方法来做到这一点?
答
我想,如果你想做到这一点,你可以简单地做:
var spans = $("span[class='a']");
答
$('.a').not('.b, .c')
这将选择a
类的所有元素没有b
或c
。但是,他们仍然可以拥有类d
,e
等等。如果您真的只想使用除a
之外的其他类别的元素,请使用Phil的答案。
答
(用于见下为什么你可能不希望做的正是在这个问题问)
您可以使用[class="a"]
“属性等于选择器”,虽然它是脆:
$('span[class="a"]').hide();
问题是,如果你的类属性中有任何空格,那么它将会中断。看到这个小提琴:http://jsfiddle.net/c7DP7/
您可以通过执行上使用普通类选择这些项目基本查询解决这个问题,然后进一步筛选他们,而只检查a
设置(并在第二过滤器修剪空格)。看到这个小提琴:http://jsfiddle.net/uD48E/1/
$('.a')
.filter(function(index){
return $(this).attr("class").trim() == "a";
})
.hide();
的问题看起来是努力使更多的“面向未来”的代码,但具体做法是更脆。拒绝与您正在过滤的当前班级无关的所有班级可能会因与班级a
(例如稍后添加的无关班级d
或e
)无关的原因而中断工作。如果您将来使用jQuery的HTML可能会发生更改,这一点非常重要。
更好的方法是只过滤掉影响类a
含义的类。考虑到这种灵活性,实际上使代码更具前瞻性。请参阅maxedison's answer以获取最佳方式。
答
另一种方法是删除这些类,然后检查是否有任何类仍然存在。如果没有,执行函数:
$('.a').each(function() {
var $this = $(this);
if (!$this.removeClass('a').attr('class').length) {
//Execute function here
}
});
字条给OP:你不必包括在选择单词'span`像菲尔在这里。如果有div或imgs可能具有所需的类,并且想要选择这些类,那么`$(“[class ='a']”)`会执行此操作。 – maxedison 2011-12-14 21:50:09
这个问题是如果属性包含任何空格,它将会中断。类选择器没有这个问题。 – 2011-12-14 21:52:27