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's documentation。

.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/

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
  "angularCompilerOptions": {
    "preserveWhitespaces": false
  }
}

我添加了评论，可以帮助您完成上述示例。

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

3 个答案: