选择带有多个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中，其余两个浏览器中这种方法都小胜第二种方法。

《选择带有多个class的元素》上有11条评论

  2. $(“[class=’good list Card’]”) 写法的问题是，class顺序不能改变，中间不能放其它class。可以说根本不能这么用。还不如第一种……

    回复

    1. 这点确实如此。不过幸运的是，如果把这个理解成“带有空格的class”的话，就可以保证顺序不会变了。我也加进去。

      回复

  3. 請問您翻譯的 Jquery 1.4.1

    是否可以簡體 能 翻一本 繁體?

    提供下載

    台灣的程式設計師也很需要

    回复

    1. 你好，我也想翻譯一份繁體的，
      但是苦於一些專有名詞把握不准，
      我只知道少量的專有名詞的對應，
      比如簡體中的“程序”對應繁體中的“程式”。
      等我最近的1.4.2翻譯完成后，
      希望你能幫忙把轉換成繁體的，
      幫助台灣的程式設計師們。
      先謝謝了。

      回复

  4. .good.list.Card这种写法是符合标准的,但是ie6的css选择器不支持
    jq可以这样,只是觉得这样和css定义的选择器差别大 怕引起不必要的误导

    还是尽量避免这种情况,等ie6彻底死绝了再

    回复

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据。