更新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模板将帮助您完成的工作。