Javascript 在HTML中为Ajax请求嵌入元素的数据库ID

有一个给定的代码：

<div id="256">
   <p>SOMELEMENT</p>
   <button class="edit">EDIT</button>
   <button class="delete">DELETE</button>
</div>
<div id="257">
   <p>SOMELEMENT2</p>
   <button class="edit">EDIT</button>
   <button class="delete">DELETE</button>
</div>
<script>
   $(".edit").click(function() { var id = $(this).parent().attr("id"); /* do some Ajax here, edit element in database with given id*/});
   $(".delete").click(function() { var id = $(this).parent().attr("id"); /* do some Ajax here, delete element in database with given id*/});
</script>

某些元素

编辑
删除
一些元素2

编辑
删除
$（“.edit”）。单击（function（）{var id=$（this）.parent（）.attr（“id”）；/*在这里执行一些Ajax操作，使用给定的id在数据库中编辑元素*/）；
$（“.delete”）。单击（function（）{var id=$（this.parent（）.attr（“id”）；/*在这里执行一些Ajax，删除数据库中具有给定id的元素*/}）；

有一个包含一些元素的数据库，这些元素具有ID，我想通过Ajax对这些元素执行一些操作。我需要元素的数据库ID，以便可以对该元素执行一些Ajax请求。上面的解决方案是可行的，但也有一些缺陷——它依赖于HTML结构（例如，当我用其他元素包装按钮时，parent（）将无法工作，因为HTML结构已更改）

---

如何以更好的方式将元素的数据库ID存储在HTML中，以便JavaScript能够获取它（例如Ajax请求）？

为什么不使用以下方法执行类似操作：

---

您可以使用数据属性。而不是让数据实体的id由html id属性表示。这些是表单数据的属性-*。 然后，您的代码可能如下所示：

<div data-elementid="256">
   <p>SOMELEMENT</p>
   <button class="edit">EDIT</button>
   <button class="delete">DELETE</button>
</div>
<div data-elementid="257">
   <p>SOMELEMENT2</p>
   <button class="edit">EDIT</button>
   <button class="delete">DELETE</button>

某些元素

编辑
删除
一些元素2

编辑
删除

$（“.edit”）。单击（函数（）{var id=$（this.parent（）.data（'elementid'）；}）；
$（.delete”）。单击（函数（）{var id=$（this.parent（）.data（'elementid'）；}）；

John Resig在这里写到：

另外，您可以在按钮元素上设置data属性，这样就不必遍历到parent（）来获取id

---

如果您想更深入，请查看Angular.js、Ember.js或Backbone.js等js框架。其思想是DOM不应用于存储数据，而应仅用于表示数据。然后可以使用Javascript模型存储应用程序数据

虽然您已经有了一个（完全有效的）可接受的答案，但我想提供另一种解决问题的方法，它消除了必须将数据附加到每个按钮的负担，而不是依赖一个类，该类可用于获取数据附加到的实际项/记录/条目的句柄，由于我的HTML倾向于有这样一个类，因此我觉得这非常方便（我将使用注释列表作为示例）：

某些元素

编辑
删除
一些元素2

编辑
删除
$（“.comment.edit”）。单击（函数（）{var id=$（this）.closest（'.comment'）。data（'id'）；}）；
$（“.comment.delete”）。单击（函数（）{var id=$（this）.closest（'.comment'）。data（'id'）；}）；

---

键是.closest（）jQuery函数，它沿DOM树向上移动以查找表示注释项的“.comment”div。这意味着，只要在.comment DIV中保留.edit和.delete元素，就可以自由修改HTML结构，而不必担心JavaScript，也不必在多个位置添加data-*属性。

这并不能解决原来的问题，即如果按钮被包装在另一个DIV中，父元素发生了变化。在这种情况下，我只需将数据属性添加到处理事件的元素中，在本例中是按钮。

$(".edit").click(function() { 
  var id = $(this).data("id"); 
  /* do some Ajax here, edit element in database with given id*/
});

<div data-elementid="256">
   <p>SOMELEMENT</p>
   <button class="edit">EDIT</button>
   <button class="delete">DELETE</button>
</div>
<div data-elementid="257">
   <p>SOMELEMENT2</p>
   <button class="edit">EDIT</button>
   <button class="delete">DELETE</button>

    <script>
        $(".edit").click(function() { var id = $(this).parent().data('elementid'); });
        $(".delete").click(function() { var id = $(this).parent().data('elementid'); });
    </script>

<div class="comment" data-id="256">
    <p>SOMELEMENT</p>
    <button class="edit">EDIT</button>
    <button class="delete">DELETE</button>
</div>
<div class="comment" data-id="257">
    <p>SOMELEMENT2</p>
    <button class="edit">EDIT</button>
    <button class="delete">DELETE</button>
</div>

<script>
    $(".comment .edit"  ).click(function() { var id = $(this).closest('.comment').data('id'); });
    $(".comment .delete").click(function() { var id = $(this).closest('.comment').data('id'); });
</script>