javascript - 如何使用 jQuery 通过数据属性查找动态添加的元素？

Question

有一个元素动态应用了这样的数据属性

var tr = $('<tr>');
tr.data('template_id', 5);
table.find('tbody').append(tr);

这里有我们的 tr。
...
这里我们要通过数据属性找到我们新添加的tr

var tr = table.find('[data-template_id="5"]');
console.log(tr) // tr.length = 0;

不幸的是，我们没有通过这种方式找到 tr。
为什么会得到这个结果？

Answer 1

您遇到的问题是通过 jQuery 添加的 data-* 属性存储在其内部缓存中。它们不能作为 DOM 中的属性使用。考虑到这一点，您可以使用 filter() 来实现您的要求:

var $tr = table.find('tr').filter(function() {
    return $(this).data('template_id') == 5;
});
console.log($tr.length);