如何解决更新div的列表
| 我有一个div列表,例如:<div class=\"categories\" onmouseover=\"this.style.background=\'#CCCCCC\'\" onmouseout=\"this.style.background=\'#FFFFFF\'\">
<div class=\"categories1\">
Andy
</div>
<div class=\"categories2\">
Link to Andy
</div>
</div>
<div class=\"categories\" onmouseover=\"this.style.background=\'#CCCCCC\'\" onmouseout=\"this.style.background=\'#FFFFFF\'\">
<div class=\"categories1\">
Mark
</div>
<div class=\"categories2\">
Link to Mark
</div>
</div>
...
<div class=\"categories\" onmouseover=\"this.style.background=\'#CCCCCC\'\" onmouseout=\"this.style.background=\'#FFFFFF\'\">
<div class=\"categories1\">
Yuri
</div>
<div class=\"categories2\">
Link to Yuri
</div>
</div>
按ѭ1内的名称排序。
通过AJAX / jQuery,我向服务器添加了一个新类别,完成此操作后,我想在客户端更新列表。
因此,我想到了以下方法:
在插入一个之后,从数据库中选择所有类别,创建整个html并用新的刷新旧的html;作为编码的较快解决方案,但是如果列表太长,则开销很大;
从服务器仅加载创建的元素,浏览DOM遍历的jQuery,检查放置元素的位置(检查字母顺序)并添加它;
它们对我来说听起来都不是很好,所以我会向您请教一些建议/技巧/想法。
谢谢
解决方法
进行AJAX调用以获取新元素。将其附加到您的包含div。然后使用->按名称对所有div进行排序
//get a raw array of dom nodes
var items = $(\'.categories1\').get();
//empty out the container
$(\'#container\').empty();
//use Array\'s prototype sort() method
items.sort(function(x,y) {
return $(x).text() > $(y).text();
});
//iterate through their sorted order,appending their parent back to the container
$(items).each(function() {
$(\'#container\').append($(this).parent());
});
这是一个摆弄它的小提琴-http://jsfiddle.net/rz3Ww/
,我倾向于您的第二个建议-jQuery可以非常快地用category1
类捕获所有元素,并且很容易将文本从此处解析为数组。然后,您所需要做的就是找出新元素之前的元素,在DOM中找到它,然后在它之后添加您的元素。
,阅读您的问题后,会想到两件事:
您正在谈论列表,但您正在使用DIV。这不是世界末日,但使用无序列表(<ul>
)在语义上更为合适。
自从您启动jQuery以来,这个问题就困扰着jQuery模板插件的使用。您正在尝试进行客户端数据绑定,这正是jQuery模板将帮助您完成的工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。