尝试从数据属性获取ID时变得不确定

Question

我无法弄清楚为什么在尝试从下面的代码中console.out iUsedId变量时变得不确定。

在这里，我将用户ID分配给data-iUserId 。

var aUsers = [];            
            for( var i = 0; i < aUsers.length; i++ ){
                $("#lblUsers").append('<tr><th scope="row">'+aUsers[i].id+'</th><td>'+aUsers[i].username+'</td><td>'+aUsers[i].firstName+'</td><td>'+aUsers[i].lastName+'</td><td>'+aUsers[i].email+'</td><td>'+"<span data-iUserId='"+aUsers[i].id+"'</span><input type='checkbox' id='chk_"+i+"'"+'</td></tr>');
            }

在这里，我尝试使用data属性中的数据，但是在控制台中，我得到的都是undefined 。

$(document).ready(function() {
    $("#remove").on("click", function() {
        $('input:checked').each(function() {
            $(this).closest('tr').remove();
            var iUserId = $(this).attr('data-iUserId');
            console.log(iUserId);
            for (var i = 0; i < aUsers.length; i++) {
                if (iUserId == aUsers[i].iUsersId) {
                    aUsers.splice(i, 1);
                }
            }
        });
    });

});

有什么猜测吗？ 请帮忙！

Answer 1

原因是您要遍历复选框，而不要遍历具有您要访问的属性的跨度。

$（this）是指复选框，而不是所使用的每个方法中的跨度：

 $('input:checked').each(function() { 
     // Inside this each statement $(this) refers 
     // to the the current 'input:checked' element being accessed
 });

由于正在访问该元素，因此应将data-iUserId属性放在复选框上。

也！ 您缺少开始跨度标签上的结束'>'：

<span data-iUserId='"+aUsers[i].id+"'</span>

Answer 2

您正在使用容器删除父对象，然后尝试访问该元素。

删除父项应该在最后一步：

$(document).ready(function() {
    $("#remove").on("click", function() {
        $('input:checked').each(function() {
            var iUserId = $(this).closest('span').attr('data-iUserId');
            console.log(iUserId);
            for (var i = 0; i < aUsers.length; i++) {
                if (iUserId == aUsers[i].iUsersId) {
                    aUsers.splice(i, 1);
                }
            }
            $(this).closest('tr').remove();
        });
    });

});

另外，考虑@pBuch的评论

Answer 3

var aUsers = [];
//...somehow populate array...
// We have to assume here that the array got populated 
for (var i = 0; i < aUsers.length; i++) {
  $("#lblUsers").append('<tr><th scope="row">' + aUsers[i].id + '</th><td>' + aUsers[i].username + '</td><td>' + aUsers[i].firstName + '</td><td>' + aUsers[i].lastName + '</td><td>' + aUsers[i].email + '</td><td>' + "<span data-iUserId='" + aUsers[i].id + "'></span><input type='checkbox' id='chk_" + i + "'" + '</td></tr>');
}

$(document).ready(function() {
  $("#remove").on("click", function() {
    $("#lblUsers").find('input[type="checkbox"]:checked').each(function() {
      // fixed to get the element with the data
      var iUserId = $(this).siblings('[data-iUserId]').data('iuserid');
      console.log(iUserId);
      for (var i = 0; i < aUsers.length; i++) {
        // bad practice to use a global aUsers
        if (iUserId == aUsers[i].iUsersId) {
          aUsers.splice(i, 1);
        }
      }
      $(this).closest('tr').remove();
    });
  });
});