2

我有以下 jQuery 代码：

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

效果很好。我可以使用它来更改页面中的 html。但我真的想选择正文中以“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" >
4

3 回答 3

5

[class^=page-calendar-practices]只会选择类属性以“page-calendar-practices”开头的元素；不是其中一个类以“page-calendar-practices”开头的元素。

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

<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)');

在这里查看它的实际操作：http: //jsfiddle.net/gEJeW/

更新：在 jQuery 1.8 中，Sizzle 引擎被完全重写。作为更新的一部分，表达式扩展架构也进行了重新设计，因此上述功能将不再起作用。

如果您使用的是 jQuery 1.8+，请使用以下命令：

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

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

有关更多信息，请参阅此处：Getting the "match" object in a Custom Filter Selector in jQuery 1.8

于 2012-06-20T18:27:04.490 回答
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");
于 2012-06-20T18:29:18.617 回答
1

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

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

描述：选择具有指定属性的元素，其值恰好以给定字符串开头。

你的不是以它开头 - 它在中途有匹配的字符串

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

于 2012-06-20T18:28:30.250 回答