如何使用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。
为什么会得到这个结果？

- abdulmanov.ilmir

---

你第一个代码片段中的 table 是什么？我认为你需要使用 $（'table'）。 - Patel

是的。var table = $('table'); - abdulmanov.ilmir

Answer 1

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

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

- Rory McCrossan

---

谢谢！ :) 我之前不知道 'filter' 方法，非常有用。 - abdulmanov.ilmir

没问题，很高兴能帮忙。 - Rory McCrossan

或者你可以添加 tr.attr('data-template_id', 5); 这样它就能正常工作了。 - Zohaib

@ZohaibHassan 可能会起作用，但除非没有其他选择，否则不应使用 attr() 访问 data() 属性。 - Rory McCrossan

Answer 2

请使用tr.attr("data-template_id", 5)代替tr.data('template_id', 5)。

- Pavla Nováková

Answer 3

我认为你可以使用

tr.attr('template_id', 5);

- long

---

这将 tr 的属性 template_id 设置为 5。问题是通过 attr 查找。 - ingrid