use*_*214 2 jquery jquery-selectors
我有以下jQuery代码:
$("body.page-calendar-practices-2012-05 #content-header h1#title")
Run Code Online (Sandbox Code Playgroud)
哪个工作正常.我可以用它来改变我页面中的html.但是我真的想要选择在主体中有一个类的页面"START-WITH page-calendar-practices"即:它将包含具有不同日期的其他页面.我尝试了以下方法:
$("body[class^=page-calendar-practices] #content-header h1#title")
Run Code Online (Sandbox Code Playgroud)
它不起作用.怎么了?
编辑 - 这是HTML:
<body class="not-front logged-in page-calendar two-sidebars page-calendar-practices-2012-05 section-calendar" >
Run Code Online (Sandbox Code Playgroud)
[class^=page-calendar-practices]只会选择一个以"page-calendar-practices"开头的class属性的元素; 不是其中一个类以"页面日历实践"开头的元素.
所以它会选择一个这样的元素:
<body class="page-calendar-practices-2012-05">
Run Code Online (Sandbox Code Playgroud)
您可以使用*选择器:
$('body[class*=page-calendar-practices]')
Run Code Online (Sandbox Code Playgroud)
但这也将选择以下内容:
<body class="page some-page-calendar-practices">
Run Code Online (Sandbox Code Playgroud)
或者,您可以使用此简单检查进行过滤:
$('body').filter(function() {
return ~(' ' + this.className).indexOf(' page-calendar-practices');
}).find('#content-header h1#title');
Run Code Online (Sandbox Code Playgroud)
这比简单的"包含"选择器更冗长,但更准确.
这是小提琴:http://jsfiddle.net/DR9K4/
为了简化操作,您可以将自己的过滤器添加到jQuery,如下所示:
jQuery.expr[':']['class-starts']? = function(el, i, m) {
return ~(' ' + el.className).indexOf(' ' + m[3]);
};
Run Code Online (Sandbox Code Playgroud)
然后只需在任何地方使用它:
$('body:class-starts(page-calendar-practices)');
Run Code Online (Sandbox Code Playgroud)
在此处查看: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);
};
});
Run Code Online (Sandbox Code Playgroud)
这是小提琴:http://jsfiddle.net/gEJeW/2/
有关更多信息,请参阅此处:在jQuery 1.8中的自定义筛选器选择器中获取"匹配"对象
| 归档时间: |
|
| 查看次数: |
826 次 |
| 最近记录: |