jQuery：按数据过滤不起作用答案

【问题标题】：jQuery: Filtering by data doesn't workjQuery：按数据过滤不起作用
【发布时间】：2015-03-21 07:28:31
【问题描述】：

我为一个小游戏做了很多图片。在每张图片中，我使用这个建议here通过函数存储一个整数

像这样：

for (var idx=0; idx<jeu.length; idx++) {
    $('#jeu').append(
        $('<img />').data('idx', idx)
    );
}

然后我检查我是否可以“手动”检索它：

> $('img')[11]
<img src="imgs/bleu.gif" />
> $($('img')[11]).data()
Object {idx: 5}

现在如果我尝试通过data 过滤器检索对象，它不起作用：

> $('img[data-idx="Object {idx: 5}"]')
[]
> $('img[data-idx="idx: 5"]')
[]

有什么办法呢？

【问题讨论】：

使用这个 $('img[data-idx="5"]') ?
你能展示 data-idx 如何分配给 img 吗？你可以在控制台看到它
在 data() 中有一个对象：$($('img')[11]).data() 给出 Object {idx: 5} 但如果我这样做 $($('img')[11]) 我看到没有像 data-idx 这样的属性，所以我不知道如何检索它跨度>

标签： jquery filter

【解决方案1】：

你正在使用data api设置值，它不会更新元素属性，这种情况下你可以使用.filter()

$('img').filter(function () {
    return $(this).data('idx') == 5
})

另一种选择是使用属性

('<img />').attr('data-idx', idx)

然后

$('img[data-idx="5"]')

【讨论】：

哇。我会尝试，这可能有效，但这是存储值并快速检索它们的最快方法，对吧？

【解决方案2】：

试试

$("body").data("idx", 5);

var filterdata = function(key, val) {
  return $.map($("*"), function(el, i) {
    return $.data(el, key) === val ? $.data(el) : null
  })[0]
};

console.dir(filterdata("idx", 5));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div></div>

【讨论】：