这是我的代码:
$.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"));
但这只是给了我一个
未定义误差
答案 0 :(得分:3)
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
});
});
答案 1 :(得分:0)
您似乎已将数据提供给<li>
下新创建的.usersOfGroupList
,因此您必须使用以下内容正确获取该数据
$("#userElement").data("userIdFromGroups")
此外,在上面的代码中,您似乎正在创建具有类似ID的多个元素,这是非常糟糕的做法。从理论上讲,如果只有一个<li>
,它就可以工作。
如果它没有,那意味着您对异步操作有一些不好的处理。
由于您正在使用异步函数来获取数据,因此只能在所需元素上设置数据属性。与此同时,您的代码继续运行并尝试检索(但未设置)数据属性。