jquery 选择带多个class的元素

转载自：http://shawphy.com/2010/08/multiple-class.html

------------------------------------------

今天收到读者来信，询问如何选择如下的元素
<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中，其余两个浏览器中这种方法都小胜第二种方法。

 

-----------------------

仅测试了$('[class="xxx xxx"]')的方法，很nice