如何将数据附加到DOM元素以供jQuery使用

How to attach data to DOM elements for jQuery consumption

本文关键字：元素 jQuery 使用 DOM 数据      更新时间：2023-09-26

我有一个项目列表，所有项目都有一个id和一个值。我使用div在php视图脚本中打印这个列表，如下所示：

<div class="myList">
    <div class="listItem item3 value4">item label</div>
    <div class="listItem item5 value7">item label</div>
    ...
</div>

其想法是包含一些jQuery，以便为列表项附加一些编辑功能。为了操作每个项目，我需要jQuery中的项目ID和值ID，我现在通过查找类模式itemID和valueID并提取ID部分（当然，这是每个项目的一个数字。然后，我用这些ID进行ajax调用，更新列表中正确的项目（给它一个用户可以选择的新值ID）

我的问题是：我做这件事的方式很有效，但对我来说似乎不太优雅。jQuery.data方法在这里似乎没有帮助，在jQuery发挥作用之前，数据需要由php视图脚本打印，所以数据需要出现在html结构中，然后由jQuery读取。我想到了自定义html属性

<div class="listItem" itemID="4" valueID="7">labeltext</div>

但这种做法好吗？有没有更好的方法将数据"馈送"到jQuery？这通常是怎么做的？

使用HTML5 data属性：

<div class="listItem" data-item-id="4" data-value-id="7">labeltext</div>

您将受益于使用jQuery的.data()语法：

$('.listItem').eq(0).data('item-id'); // Returns: 4

您可以使用数据属性：

<div class="listItem"
     data-id="4"
     data-valueId="7">
       labelText
</div>

并使用以下方法在JS中恢复它们：（当您的选择器在listItem类上时）

...
var $this = $(this); //just an habit ;)
var id = $this.data('id');
var valueId = $this.data('valueId');
...
相关文章：