如何使用jquery在页面上动态添加用户

Question

我在弄清楚这一点时遇到了一些麻烦。 我有一个数据库，上面有用户，我想使用 jquery 在页面上动态显示每个用户。

我刚刚在数组中抛出了一些用户数据对象，我试图调用数组中的每个用户对象以在页面上显示为列表项

html

<h1>List</h1>
<ul id="list">

</ul>

javascript

var user = [
{
    username: alex,
    age: 20
},
{
    username: james,
    age: 20
}
]

function addUser() {
    var username = user.username;
    var age = user.age

    var $user = $("<li>" + username + "</li>");
    var $age = $("<li>" + age + "</li>");

    $("#list").append($user + " " + $age);
}

$.each(user, addUser());

Answer 1

你的错误很简单。 你必须更换addUser()由addUser当您使用$.each方法。 使用.append方法时也有错误。 试试这个代码：

 var user = [ { username: "alex", age: 20 }, { username: "james", age: 20 } ]; function addUser(theCase, value) { var username = value.username; var age = value.age; var user = '<li> ' + username; // Use a simple string, it's better and faster! var age = age + ' </li>'; $("#list").append(user + " " + age); } $.each(user, addUser);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <h1>List</h1> <ul id="list"> </ul>

在这里，您正在使用回调。 如果您想了解有关回调的更多详细信息，请参阅MDN 的文档。

.each方法或.append方法也有几个错误。 查阅文档。

.each方法为您的数组user上的每个案例调用您的回调。 此方法还在您的回调中为您提供了处理案例女巫的索引和值。

Answer 2

当您将回调传递给 jQuery each函数时，将使用user数组中的每个元素调用回调。

检查jQuery.each传递给回调的参数。 回调函数签名应该期望索引和该索引中元素的值。

例如：

var users = user = [
  {
    username: alex,
    age: 20
  },
  {
    username: james,
    age: 20
  }
];

function addUser(index, user) {
  // do what you want and in the end
  $('#list').append(/* an <li> element */);
};

// Now pass the function as a callback, but don't invoke it.
$.each(users, addUser);

Answer 3

您能否查看页面： https : //jsfiddle.net/rxcz73x9/2/

var user = [{
   username: "alex", // use string
   age: 20
}, {
   username: "james", // use string
   age: 20
}];

function addUser(idx, user) {
   var username = user.username;
   var age = user.age

   var $user = $("<li>" + username + "</li>");
   var $age = $("<li>" + age + "</li>");

   $("#list").append($user).append($age); // use append for each node
}

$.each(user, addUser); // use function name instead of addUser()

我添加了可以帮助您解决上述示例的评论。