我需要根据存储在元素.data()对象中的值来选择元素.至少,我想使用选择器选择顶级数据属性,可能是这样的:
$('a').data("category","music");
$('a:data(category=music)');
或者选择器可能采用常规属性选择器格式:
$('a[category=music]');
或者以属性格式,但使用说明符指示它在.data():
$('a[:category=music]');
我发现James Padolsey的实现看起来很简单,但很好.选择器格式化在该页面上显示的镜像方法.还有这个Sizzle补丁.
出于某种原因,我记得有一段时间回顾jQuery 1.4将包含对jquery .data()对象中值的选择器的支持.但是,现在我正在寻找它,我找不到它.也许这只是我看到的一个功能请求.是否有支持,我只是没有看到它？
理想情况下,我想使用点表示法支持data()中的子属性.像这样:
$('a').data("user",{name: {first:"Tom",last:"Smith"},username: "tomsmith"});
$('a[:user.name.first=Tom]');
我还想支持多个数据选择器,其中只找到具有所有指定数据选择器的元素.常规jquery多选择器执行OR操作.例如,$('a.big, a.small')选择a带有类big或标签的标签small.我正在寻找一个AND,也许是这样的:
$('a').data("artist",{id: 3281, name: "Madonna"});
$('a').data("category","music");
$('a[:category=music && :artist.name=Madonna]');
最后,如果数据选择器上有比较运算符和正则表达式功能,那将会很棒.所以$(a[:artist.id>5000])可能.我意识到我可能会做很多这样的事情filter(),但是有一个简单的选择器格式会很好.
有什么解决方案可以做到这一点？Jame的Padolsey是目前最好的解决方案吗？我主要关注的是性能,还有子属性点符号和多数据选择器等额外功能.是否有其他实现支持这些内容或以某种方式更好？
作为参考,这里有一篇关于使用jQuery创建自定义过滤器选择器的文章.
对于那些不熟悉jQuery的自定义滤波器选择器的人,这里有一个关于它们的快速入门:
如果需要可重用filter,可以通过向jQuery.expr[':']对象添加自己的函数来扩展jQuery的选择器表达式.
该函数将在当前集合中的每个元素上运行,并应返回true或false(非常类似filter).三位信息传递给此函数:
有问题的元素
整个集合中此元素的索引
match从正则表达式匹配返回的数组,其中包含更复杂表达式的重要信息.
一旦你扩展jQuery.expr[':'],你可以用它在你的jQuery选择过滤器,就像你使用任何内置者的(:first,:last,:eq()等)
这是一个示例,我们将过滤分配了多个类的元素:
jQuery.expr[':'].hasMultipleClasses = function(elem, index, match) {
return elem.className.split(' ').length > 1;
};
$('div:hasMultipleClasses');
这是小提琴:http://jsfiddle.net/acTeJ/
在上面的例子中,我们没有使用match传入我们函数的数组.让我们尝试一个更复杂的例子.在这里,我们将创建一个过滤器来匹配具有高于tabindex指定数量的元素:
jQuery.expr[':'].tabindexAbove = function(elem, index, match) {
return +elem.getAttribute('tabindex') > match[3];
};
$('input:tabindexAbove(4)');
这是小提琴:http://jsfiddle.net/YCsCm/
这是有效的原因是因为match数组是从用于解析选择器的正则表达式返回的实际数组.所以在我们的例子中,match将是以下数组:
[":tabIndexAbove(4)", "tabIndexAbove", "", "4"]
如您所见,我们可以通过使用来获得括号内的值match[3]. …
我有两个元素,具有以下设置:
<span data-placeholder-class="test-class"></span>
<span data-placeholder-template="/some/template.hbs"></span>
我正在使用下划线来遍历包含这些属性之一的任何元素,然后执行相关操作.
目前这样做是这样的
_.each($('[data-placeholder-class], [data-placeholder-template]'), function cb(element) {
// code goes here
})
我不想定义每个数据属性来循环,而是想知道是否有一种方法可以选择包含公共关键字的所有属性,在本例中为占位符.例如
_.each($('[data-placeholder-*]'), function cb(element) {
// code goes here
})
任何人都知道这是否可行？
如何查找具有与模式匹配的属性的所有元素data-foo-bar-*,例如
<div data-foo-bar-id="" />
使用document.querySelectorAllwith foo-bar-*pattern会出错:
未捕获的SyntaxError:无法在'Document'上执行'querySelectorAll':'[data-foo-bar-*]'不是有效的选择器.