选择带有多个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个想法

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

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

  2. 請問您翻譯的 Jquery 1.4.1

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

    提供下載

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

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

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

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

发表评论