Question

我有以下jQuery代码：

$("body.page-calendar-practices-2012-05 #content-header h1#title")

工作正常。我可以用它来改变我页面中的html。但是我真的想要选择在主体中有一个类的页面“START-WITH page-calendar-practices”即：它将包含具有不同日期的其他页面。我尝试了以下方法：

$("body[class^=page-calendar-practices] #content-header h1#title")

它不起作用。有什么问题？

编辑 - 这是HTML：

<body class="not-front logged-in page-calendar two-sidebars page-calendar-practices-2012-05 section-calendar" >

Answer 1

[class^=page-calendar-practices]只会选择一个以“page-calendar-practices”开头的class属性的元素;不是其中一个类以“页面日历实践”开头的元素。

所以它会选择一个这样的元素：

<body class="page-calendar-practices-2012-05">

您可以使用*选择器：

$('body[class*=page-calendar-practices]')

但也会选择以下内容：

<body class="page some-page-calendar-practices">

或者，您可以使用此简单检查进行过滤：

$('body').filter(function() {
    return ~(' ' + this.className).indexOf(' page-calendar-practices');
}).find('#content-header h1#title');

比简单的“包含”选择器更冗长，但更准确。

这是小提琴：http://jsfiddle.net/DR9K4/

为了简化操作，您可以将自己的过滤器添加到jQuery，如下所示：

jQuery.expr[':']['class-starts'] = function(el, i, m) {
    return ~(' ' + el.className).indexOf(' ' + m[3]);
};

然后只需在任何地方使用它：

$('body:class-starts(page-calendar-practices)');

在此处查看：[{3}}

更新：在jQuery 1.8中，http://jsfiddle.net/gEJeW/。作为更新的一部分，表达式扩展体系结构也已经过重新设计，因此上述功能将不再起作用。

如果你使用的是jQuery 1.8+，请使用：

$.expr[':']['class-starts'] = $.expr.createPseudo(function (arg) {
    return function (el) {
        return ~(' ' + el.className).indexOf(' ' + arg);
    };
});

这是小提琴：the Sizzle engine was completely rewritten

有关详细信息，请参阅此处：http://jsfiddle.net/gEJeW/2/

Answer 2

您的尝试是查找以字符串开头的类属性，而不是以该字符串开头的特定类名称。

我认为你可以只使用包含逻辑的属性：

$("body[class*='page-calendar-practices'] #content-header h1#title")

这可以匹配那些不以那个开头的类名，但你似乎不太可能使用这样的类名。

如果你想要准确，我认为你不能在一个简单的选择器中做到这一点 - 你可能需要一些javascript逻辑：

$(document.body).filter(function() {
    return((" " + this.className).indexOf(" page-calendar-practices") != -1);
}).find("#content-header h1#title");

Answer 3

http://api.jquery.com/attribute-starts-with-selector/

jQuery('[attribute^="value"]')

描述：选择具有指定属性的元素，其值始于给定字符串。

你的不是从它开始 - 它中途有匹配的字符串

您想使用*选择器：http://api.jquery.com/attribute-contains-selector/

选择其中一个类以某个字符串开头的元素

3 个答案: