选择带有多个class的元素

今天收到读者来信,询问如何选择如下的元素
<div class=”good list Card”></div>
这里有个特征,就是需要选择同时带有这几个class的元素。
或者也被误认为选择一个带有空格的class。

经过测试,使用选择特殊的转义符号来做

$(“.good\\ list\\ Card”)

这个只有IE6下能成功。(我仅测试了IE6,Firefox 3.6.8和Chrome 6 dev)
推测原因是因为先进的浏览器中jQuery是直接调用getElementsByClassName,
而这个浏览器方法是不支持带空格的class的,他会认为是多个class。
而IE6之所以成功,是因为本身就不支持getElementsByClassName,
所以jQuery内部是遍历了所有元素,
得到class属性值是“good list Card”的元素。

解决方案有两种:
逐个过滤,先找到带有good的元素,
然后从中筛选出带有list的元素,最后筛选出带有Card的元素:

$(“.good”).filter(“.list”).filter(“.Card”)

或者让先进的浏览器也跟IE6一样,直接通过属性选择器:

$(“[class=’good list Card’]”)

测试了一下性能,根据多class测试显示,后者的性能显著的好于前者。
因此推荐使用后者,不论从易读性还是性能上都高于前者。但Cloudream在评论中指出,后者的问题是class的顺序不能变。
附:
要选择其他带有特殊字符元素,参考用jQuery 选择器选取包含特殊字符的元素

经Cloudream提醒,直接用 $(“.good.list.Card”) 即可。
测试下来,除了IE6中,其余两个浏览器中这种方法都小胜第二种方法。