Question

这是我的代码：

$.getJSON("link here", function (result) {
    $.each(result, function (i, value) {
        $('.usersOfGroupList').append($("<li id='userElement' data-userId='' ></li>").data('userIdFromGroups', value.Id).html(value.FirstName + " " + value.LastName));
        console.log($(".usersOfGroupList").data());
    });
});

data-method中的值是正确存储数据但是当我尝试在我的控制台中记录这个值时，当我只想要D的值时，我得到了整个javascript-object。我也尝试过使用密钥像这样：

console.log($(".usersOfGroupList").data("userIdFromGroups"));

但这只是给了我一个

未定义误差

Answer 1

id每个元素必须是唯一的，因此请从id中移除li属性。

由于您要向新创建的li添加数据属性，因此您需要使用li作为选择器，:eq(index)每次都能获得正确的li。

如下所示： -

console.log($(".usersOfGroupList li:eq("+i+")").data('userIdFromGroups'));

示例硬编码代码段： -

result = [{'Id':1,'FirstName':'A','LastName':'B'},{'Id':2,'FirstName':'C','LastName':'D'}];


$.each(result, function (i, value) {
  $('.usersOfGroupList').append($("<li data-userId='' ></li>").data('userIdFromGroups', value.Id).html(value.FirstName + " " + value.LastName));
  console.log($(".usersOfGroupList li:eq("+i+")").data('userIdFromGroups'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="usersOfGroupList">

所以完整代码需要： -

$.getJSON("link here", function (result) {
    $.each(result, function (i, value) {
        $('.usersOfGroupList').append($("<li data-userId='' ></li>").data('userIdFromGroups', value.Id).html(value.FirstName + " " + value.LastName));// remove repetitive id
        console.log($(".usersOfGroupList li:eq("+i+")").data('userIdFromGroups')); // use index i to get correct li data
    });
});

Answer 2

您似乎已将数据提供给<li>下新创建的.usersOfGroupList，因此您必须使用以下内容正确获取该数据

$("#userElement").data("userIdFromGroups")

此外，在上面的代码中，您似乎正在创建具有类似ID的多个元素，这是非常糟糕的做法。从理论上讲，如果只有一个<li>，它就可以工作。

如果它没有，那意味着您对异步操作有一些不好的处理。

由于您正在使用异步函数来获取数据，因此只能在所需元素上设置数据属性。与此同时，您的代码继续运行并尝试检索（但未设置）数据属性。

.data（）返回undefined

2 个答案: