用于确切类名的Css选择器

Question

我正在尝试为确切的类名创建一个css选择器查​​询.

考虑一下这个HTML

<div class="My class1">Some long text</div>
<div class="My class1 234">Some long text2</div>
<div class="My class1">Some long text3</div>
<div class="My class1 haha">Some long text2</div>

现在我只想抓住班级'我的班级1'...而忽略'我的班级1,234'或'我的班级1哈哈'..

查询$$('div.My class1')给出了上述所有4个.注意:我正在尝试使用firebug控制台..

如何在这里指定确切的类名,以便只获取特定的类？

谢谢

Answer 1

jQuery等于选择器:http://api.jquery.com/attribute-equals-selector/

jQuery("[class='My class1']").

要么

$("[class='My class1']").

要么

$$("[class='My class1']").

Answer 2

元素中的类定义由空格分隔，因此您的第一个元素实际上同时具有类“My”和“class1”。

如果您使用的是 Mootools，则可以使用以下内容：

$$("div.My.class1:not(div.234):not(div.haha)")

Mootools 中的示例：http : //jsfiddle.net/vVZt8/2/

参考：http : //mootools.net/docs/core125/core/Utilities/Selectors#Selector : not

如果您使用的是 jQuery，则可以使用以下内容：

$("div.My.class1").not("div.234").not("div.haha");

jQuery 中的示例：http : //jsfiddle.net/vVZt8/3/

参考：http : //api.jquery.com/not-selector/

这两个示例基本上检索具有“My”和“class1”类的所有元素，然后删除属于“div”元素且分配了“234”或“haha”类的任何元素。

Answer 3

属性选择器语法

对于直接的 CSS，它是：

[class='My class1']

对于 jQuery、MooTools 等大多数 javascript 框架，它将与用于直接 CSS 的选择器字符串相同。

关键是使用属性选择器来做，而不是直接通过类名本身来选择。的class=（只有等号）将只选择字符串的下列完全匹配。如果您还需要捕捉，class1 My那么您还需要选择[class='class1 My']. 这将涵盖仅应用这两个类的两种情况（无论 html 中的顺序如何）。