jquery - 使用 jquery 创建动态列表

Question

首先我要说的是，我在论坛上看到了类似的问题，但是我没有找到一个我能够理解并适用于我的情况的问题。

话虽如此，我的问题如下:

我想建立一个动态变化的列表。 (该列表显示当前登录的用户的名称)。

假设登录用户的姓名存储在一个数组 = ["name1", "name2", "name3"....] 中，数组中的数据是更新后的数据。

形式为:

<div id="users">
    <ul class="list">
      <li>
        <h3 class="name">name1</h3>
      </li>
      <li>
        <h3 class="name">name2</h3>
      </li>
    </ul>
  </div> 

如何使用 jquery 修改列表，以显示数组中的名称并根据其内容动态更改？

非常感谢。

Answer 1

您实际上并不需要使用事件。当获得更新的列表后，直接调用update方法。

但是，正如其他用户所指出的，使用数据绑定(bind)库可能会更好。

start_with.html

<div id="users">
  <ul class="list">
    <li>
      <h3 class="name">name1</h3>
    </li>
    <li>
      <h3 class="name">name2</h3>
    </li>
  </ul>
</div> 

update_list.js

// Note: This method will clear any user selections and may cause other problems since the previous list is deleted and recreated.
function update_list(updated_users) {

  // clear the existing list
  $('#users .list li').remove();

  $.each(updatedUsers, function(index,userName) {
    $('#users .list').append('<li><h3 class="name">'+userName+'</h3></li>')
  });

}

example_1.js

// Get the updated list
var updated_users = ["name1", "name2", "name3"];
// Update it
update_list(updated_users);

after_example_1.html

<div id="users">
  <ul class="list">
    <li><h3 class="name">name1</h3></li>
    <li><h3 class="name">name2</h3></li>
    <li><h3 class="name">name3</h3></li>
  </ul>
</div> 

example_2.js

// Example by AJAX get using a made-up URL
$.get('http://api.example.com/users/active.json', function(data) {
  // What you do with data depends on what the API returns...
  // I'm assuming it returns an array of users.
  // data = ['user1', 'user2', 'user3'];

  update_list(data);
})

after_example_2.html

<div id="users">
  <ul class="list">
    <li><h3 class="name">user1</h3></li>
    <li><h3 class="name">user2</h3></li>
    <li><h3 class="name">user3</h3></li>
  </ul>
</div> 

注意:此方法的一个缺点是旧列表会被破坏。这意味着，例如，如果您的列表有输入框，则用户输入的内容将在更新时被销毁。如果列表中有状态，并且还想保留元素的状态，则必须使用不同的方法来更新列表。