Javascript 在jquery中迭代json

帮帮我，伙计们

在Ajax调用之后，我有一个JSON对象，其中有两行用户。我有动态id，因为我打算将一些内容加载到表单中，以编辑页面上的用户详细信息。我的问题是FOR循环生成的每个用户行都具有相同的ID。因此，所有Ajax生成的行都具有相同的ID，在本例中为48。 这是密码

// Get the admin information
var loadAdmin = function() {
    $.ajax({
        type: 'GET',
        id: id,
        cache: false,
        url: 'scripts/administratorsList.php?id=' + id
    }).done(function(data) {
        var adminData = JSON.parse(data);

        for (var i in adminData) {
            var userId = adminData[i].id;
            $('#adminList').append('<li class="media"><a href="#" class="media-link" id="edit' + userId + '"><div class="media-left"><img src="assets/images/placeholder.jpg" class="img-circle" alt=""></div><div class="media-body"><div class="media-heading text-semibold">' + adminData[i].userName + '</div><span class="text-muted">Administrator</span></div><div class="media-right media-middle text-nowrap"><span class="text-muted"><i class="icon-pin-alt text-size-base"></i>&nbsp;' + adminData[i].userCompany + '</span></div></a></li>')

            // Add the edit form view here          
            $('#edit' + userId).on('click', function(userId) {
                var userId = adminData[i].id;
                $('#userConfig').append('Here I will generate the form to edit user ' + userId); // This is where the ID stays the same. I have used .append over .html for debugging purposes. Each row returns an ID of 48
            });
        }
    });
};

提前谢谢

随着Jacub的实施

adminData中的forvar i {

        var userId = adminData[i].id;
        storeValueToRemainSame(userId);

    }

    function storeValueToRemainSame(userId) {
    $('#adminList').append('<li class="media"><a href="#" class="media-link" id="edit' + userId + '"><div class="media-left"><img src="assets/images/placeholder.jpg" class="img-circle" alt=""></div><div class="media-body"><div class="media-heading text-semibold">' + adminData[i].userName + '</div><span class="text-muted">Administrator</span></div><div class="media-right media-middle text-nowrap"><span class="text-muted"><i class="icon-pin-alt text-size-base"></i>&nbsp;' + adminData[i].userCompany + '</span></div></a></li>')

        // Add the edit form view here          
        $('#edit' + userId).on('click', function(userId) {
            var userId = adminData[i].id;
            $('#userConfig').append('Here I will generate the form to edit user ' + userId); // This is where the ID stays the same. I have used .append over .html for debugging purposes. Each row returns an ID of 48
        });
    }

---

这里的问题是，您正在引用处理程序之外的值，该值发生了更改，因此保留了最后一个值

for(var i in data) {
    var value = i;
    $('#someId').on('click', function(){
         console.log(value);
    });
}

唯一写入的值将是最后一个值，因为对它的引用将保留。 可能的解决方案是，例如：

function storeValueAndHandleClickEvent(value){
    $('#someId').on('click', function(){
         console.log(value);
    });
}

for(var i in data) {
    storeValueAndHandleClickEvent(i);
}

编辑：如果我使用与问题中相同的代码

for (var i in adminData) {
    var userId = adminData[i].id;
    storeValueToRemainSame(userId);
}

function storeValueToRemainSame(userId) {
    $('#adminList').append('<li class="media"><a href="#" class="media-link" id="edit' + userId + '"><div class="media-left"><img src="assets/images/placeholder.jpg" class="img-circle" alt=""></div><div class="media-body"><div class="media-heading text-semibold">' + adminData[i].userName + '</div><span class="text-muted">Administrator</span></div><div class="media-right media-middle text-nowrap"><span class="text-muted"><i class="icon-pin-alt text-size-base"></i>&nbsp;' + adminData[i].userCompany + '</span></div></a></li>')

    // Add the edit form view here          
    $('#edit' + userId).on('click', function(userId) {
        var userId = adminData[i].id;
        $('#userConfig').append('Here I will generate the form to edit user ' + userId); // This is where the ID stays the same. I have used .append over .html for debugging purposes. Each row returns an ID of 48
    });
}

---

这里的问题是，您正在引用处理程序之外的值，该值发生了更改，因此保留了最后一个值

for(var i in data) {
    var value = i;
    $('#someId').on('click', function(){
         console.log(value);
    });
}

唯一写入的值将是最后一个值，因为对它的引用将保留。 可能的解决方案是，例如：

function storeValueAndHandleClickEvent(value){
    $('#someId').on('click', function(){
         console.log(value);
    });
}

for(var i in data) {
    storeValueAndHandleClickEvent(i);
}

编辑：如果我使用与问题中相同的代码

for (var i in adminData) {
    var userId = adminData[i].id;
    storeValueToRemainSame(userId);
}

function storeValueToRemainSame(userId) {
    $('#adminList').append('<li class="media"><a href="#" class="media-link" id="edit' + userId + '"><div class="media-left"><img src="assets/images/placeholder.jpg" class="img-circle" alt=""></div><div class="media-body"><div class="media-heading text-semibold">' + adminData[i].userName + '</div><span class="text-muted">Administrator</span></div><div class="media-right media-middle text-nowrap"><span class="text-muted"><i class="icon-pin-alt text-size-base"></i>&nbsp;' + adminData[i].userCompany + '</span></div></a></li>')

    // Add the edit form view here          
    $('#edit' + userId).on('click', function(userId) {
        var userId = adminData[i].id;
        $('#userConfig').append('Here I will generate the form to edit user ' + userId); // This is where the ID stays the same. I have used .append over .html for debugging purposes. Each row returns an ID of 48
    });
}

---

在ajax之外尝试这个简单的代码

您将使用事件委派从动态添加的dom元素的id中选择id

  $('ul').on('click','div[id^="edit"]',function() {
                    var userId = $(this).attr('id').substring(4);
                    $('#userConfig').append('Here I will generate the form to edit user ' + userId); // This is where the ID stays the same. I have used .append over .html for debugging purposes. Each row returns an ID of 48
                });

---

在ajax之外尝试这个简单的代码

您将使用事件委派从动态添加的dom元素的id中选择id

  $('ul').on('click','div[id^="edit"]',function() {
                    var userId = $(this).attr('id').substring(4);
                    $('#userConfig').append('Here I will generate the form to edit user ' + userId); // This is where the ID stays the same. I have used .append over .html for debugging purposes. Each row returns an ID of 48
                });

---

感谢您的输入，Jacub。单击处理程序是动态生成的，我看不出如何根据您的建议执行此操作。由于“someId”是在while循环之外生成的，我将无法附加动态ID，是吗？@Jacub Balhar。我有一个错误的var userId=adminData[I].id，它正在将用户id还原回错误。您已修复该问题。非常感谢您的帮助谢谢您的输入，Jacub。单击处理程序是动态生成的，我看不出如何根据您的建议执行此操作。由于“someId”是在while循环之外生成的，我将无法附加动态id，是吗？@Jacub Balhar.我有一个错误的var userId=adminData[I].id，它正在将用户id还原回错误。您修复了问题。非常感谢您的帮助谢谢，Madalin。很抱歉延迟。我必须在那里研究事件委派。我在Ajax调用之前和之后将您建议的代码添加到页面中，我要求它将用户id记录到控制台，但我无法获得任何输出$'ul'。在'click'，'div[id^=edit]'上，函数{var userId=$this.attr'id'。子字符串4；console.loguserId；//$'userConfig.append'这里我将生成表单来编辑用户'+userId；//这是id保持不变的地方。我使用了.append over.html进行调试。每行返回一个id 48}；谢谢，Madalin。很抱歉耽搁了。我不得不在那里研究事件委派。我在Ajax调用前后向页面添加了您建议的代码，我要求它将用户id记录到控制台，但我无法获得任何输出$'ul'。单击，'div[id^=edit]'，函数{var userId=$this.attr'id'.substring4；console.loguserId；//$'userConfig'.append'在这里我将生成表单来编辑用户'+userId；//这是id保持不变的地方。我使用了.append over.html进行调试。每行返回一个id 48}；