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

Question

我想这应该是一个非常简单的任务，但使用 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 我可以看到所有数据幻灯片属性（包括它们的数值）都正确附加到 lis 并注销：

$('.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