如何在动态创建的html元素中存储来自ajax查询的数据的记录id

Question

假设以下配置：

• 服务器端是 PHP 应用程序，以 json 格式响应数据（项目列表、单个项目详细信息等）的请求
• 客户端是 JQuery 应用程序，向该 PHP 应用程序发送 ajax 请求并创建与接收到的对应的 html 内容数据

例如：客户端请求“名称以‘A’开头的所有动物的列表”，从服务器获取 json 响应，并为每个“动物”创建一些 html gizmo，例如带有动物描述的 div 或类似的内容。它是什么 html 元素并不重要，但它必须通过“包含”该记录的 id 来准确指向特定记录。

这是我的困境：使用“id”属性是一个好的解决方案吗？所以它会像：

<div id="10" class="animal">
<p>
This is animal of very mysterious kind...
</p>
</div>

<div id="11" class="animal">
<p>
And this one is very common to our country...
</p>
</div>

其中 id="10" 当然表明这是 id = 10 的记录的表示。

或者也许我应该将此记录 id 存储在一些自定义标签中，例如

<record_id>10</record_id> 

并严格保留一个“id”它本来应该是（css选择器）？

我需要该记录 ID 来进行其他操作，例如使用一些用户输入更新数据库或删除一些“动物”或创建新的动物或任何需要的东西。所有操作都将通过 JQuery 和 ajax 请求完成，响应也将通过动态创建 html 界面来可视化。

我确信以前有人必须处理过这类事情，所以我将不胜感激有关该主题的一些提示。

Answer 1

您可以使用 jQuery API 提供的 data() 来实现此目的。

要存储数据，您可以使用

$("element").data("record-id", 5);

要检索值，您可以使用

$("element").data("record-id");

data() 存储数据的方式可以避免任何内存泄漏问题。

您可以在此处了解有关 data() 方法的更多信息。

Answer 2

您应该使用 data 方法在元素上存储任意数据，然后检索它。示例：

var elm = $('<li>').data('record_id', 5);

并简单地通过以下方式检索：

elm.data('record_id');