让我首先说我在论坛上看到了类似的问题,但是我没有找到一个我理解并适用于我的情况。
话虽如此,我的问题如下:
我想构建一个动态更改的列表。 (该列表显示当前登录的用户名。)
假设登录用户的名称存储在array = [“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修改列表,以显示数组中的名称并根据其内容动态更改?
非常感谢。答案 0 :(得分:6)
您实际上不需要使用活动。获得更新列表后,直接调用update方法。
但是,正如其他用户所指出的那样,使用数据绑定库可能会更好。
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>
注意:此方法的一个缺点是旧列表被破坏。这意味着,如果您的列表中包含输入框,则用户输入的内容将在更新时销毁。如果列表中有状态,如果您还想保留元素的状态,则必须使用其他方法更新列表。
答案 1 :(得分:1)
传统上,数据绑定最好由其他库(如Knockoutjs)处理。话虽这么说,有些方法可以在jQuery中实现类似的结果。一个简单的方法是仅在我们更新的列表进入时发布一个事件,并从中重建我们的DOM。
(function () {
"use strict";
var $list = $("#users .list");
var tmplt = "<li><h3>{{name}}</h3></li>";
$list.on( "updatedList", updateList );
function updateList ( event, names ) {
$list.html($.map( names, function ( name ) {
return tmplt.replace( /{{name}}/, name );
}).join(""));
}
// Anytime you want to update, pass the new names into a trigger
$list.trigger( "updatedList", [ [ "Bob", "Richard", "Kendra", "Jake" ] ] );
}());
演示:http://jsfiddle.net/wDFKC/1/
请注意,虽然您可以使用jQuery执行此操作,但最好由其他工具(如Knockoutjs)处理。原因是其他工具更聪明一些,并且会决定需要更改DOM的哪些部分。
例如,如果用户根据我们的当前列表和我们更新的列表登录,则没有理由我们应该删除他们的条目,只是再次添加它。你可以在Knockoutjs旁边使用jQuery,这样两者在应用程序中很好地协同工作。您应该花几分钟时间阅读使用Observable Arrays的好处。