我想这应该是一个非常简单的任务,但使用 Firefox for Mac, 3.6.12 以下内容不起作用:
// assign data attributes
$('.gallery li').each(function(i) {
$(this).data('slide',i+1);
});
// outputting an empty jQuery object
console.log($('.gallery li[data-slide]'));
// this does not work either outputting an empty jQuery object
console.log($("[data-slide]"));
使用 Firebug 我可以看到所有数据幻灯片属性(包括其数值)都正确附加到li
s 并注销:
$('.gallery li').each(function(index) {
console.log($(this).data());
});
输出如预期:
Object { slide=1}
Object { slide=2}
Object { slide=3}
Object { slide=4}
那么为什么第一个console.log
不行?
data
将项目添加到 jQuery 的内部数据持有者中,而不是添加到data-
属性。这些都读过intojQuery 的data()
结构,但使用 jQuery 插入的值不会反馈到 DOM 中。
模仿这个的最简单的方法是使用.filter()
:
// To replicate $('.gallery li[data-slide]')
$('.gallery li').filter(function(){
return (undefined !== $(this).data('slide'));
});
您也可以将其作为自定义选择器执行此操作:
$.expr[':'].hasData = function(obj, index, meta, stack) {
return (undefined !== $(obj).data(meta[3]));
};
$('.gallery li:hasData(slide)'); // li elements under .gallery with "slide" data set
$(':hasData(slide)'); // any element with "slide" data set
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)