jQuery 1.4.4：如何根据数据属性值查找元素？

Question

我想这应该是一个很琐碎的任务，但使用Firefox浏览器的Mac，3.6.12以下不工作：使用Firebug

// 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]")); 

我可以看到，所有的数据幻灯片属性，包括他们的数值是正确连接到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不工作？

Answer 1

data将项目添加到jQuery的内部数据持有者，而不是data-属性。这些被读取到 jQuery的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