使用jQuery的.data()方法获取数据返回undefined问题求助

嘿，我一眼就看出问题所在啦！你把数据存错地方了😉

问题根源 #

你通过.data('userIdFromGroups', value.Id)把数据绑定到了动态创建的<li>元素上，但之后却尝试从父容器.usersOfGroupList中读取这个数据——这两个是完全不同的元素，所以调用$(".usersOfGroupList").data("userIdFromGroups")自然会返回undefined。

修正后的代码示例 #

我们可以先把创建的<li>存为变量，这样就能直接操作它并读取数据：

$.getJSON("link here", function (result) {
  $.each(result, function (i, value) {
    // 先创建li元素并赋值给变量
    const $userItem = $("<li id='userElement' data-userId='' ></li>")
      .data('userIdFromGroups', value.Id)
      .html(`${value.FirstName} ${value.LastName}`);
    
    // 将li添加到列表容器
    $('.usersOfGroupList').append($userItem);
    
    // 打印当前li的userIdFromGroups数据
    console.log($userItem.data("userIdFromGroups"));
  });
});

后续读取已有li的数据方法 #

如果之后需要读取列表中某个<li>的数据，得先选中对应的li元素，比如：

• 获取第一个li的数据：

console.log($(".usersOfGroupList li:first").data("userIdFromGroups"));

• 遍历所有li并打印数据：

$(".usersOfGroupList li").each(function() {
  console.log($(this).data("userIdFromGroups"));
});

关键提醒 #

jQuery的.data()方法是将数据绑定在你调用该方法的jQuery对象对应的DOM元素上，所以存储和读取数据时，一定要确保操作的是同一个元素哦！

内容的提问来源于stack exchange，提问作者user7388204