For循环在Jquery中只运行一次

For loop only running once in Jquery

本文关键字：一次 运行 循环 Jquery For      更新时间：2023-09-26

在jQuery中只运行一次for循环时出现问题。Users是一个包含4个项的数组，对于每个项，它应该将该项作为列表元素附加到userList中，userList是一个ul。它按预期追加数组中的第一个元素，但仅追加该元素。不确定为什么它没有贯穿整个阵列？

$(document).ready(function() {
    var $currentUser = $('<li class="user"></li>');
    for(var i = 0; i < users.length; i++) {
        $currentUser.text(users[i]);
        $currentUser.appendTo('.userList');
    }    
    //alert(users.length) returns "4".
});

试试这个

$(document).ready(function(){
for(var i = 0; i < users.length; i++) {
    var $currentUser = $('<li class="user"></li>');
    $currentUser.text(users[i]);
    $currentUser.appendTo('.userList');
  }
});

您正在覆盖元素，而不是为每个用户创建一个新元素。请尝试上面的代码。

更多jQuery'ish

$('.userList').append(function() {
    return $.map(users, function(user) { 
        return $('<li />', {
            'class' : 'user',
            text    : user
        })
    });
});

FIDDLE

您不会为每次迭代添加新的<li>：

这是一个有效的解决方案：

for (var i = 0; i < users.length; i++) {
    $('<li class="user"></li>'
        .text(users[i])
        .appendTo('.userList');
}

https://jsfiddle.net/2abqa5us/1/

在循环的外部创建li，然后尝试将同一元素的文本设置为每个用户，以便在每次迭代时覆盖它。你确定最后一个条目不是你看到的那个吗？

.text将覆盖以前的文本，该文本看起来像是只有一个用户的

试试这个。

$(document).ready(function(){
    for(var i = 0; i < users.length; i++) {
        var $currentUser = $('<li class="user"></li>');
        $currentUser.text(users[i]);
        $currentUser.appendTo('.userList');
    }

});
相关文章：