Question

我有一个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>

由categories1内的名称订购。

通过AJAX / jQuery，我向服务器添加了一个新类别，在此操作之后，我想在客户端更新列表。

所以，我想到了这些方式：

在插入一个之后从数据库中选择所有类别，创建整个html并使用新的html刷新旧的html;作为编码的更快的解决方案，但如果列表太长，开销很大;
仅从服务器加载创建的元素，浏览DOM的jQuery，检查元素的放置位置（检查字母顺序）并添加;

这些对我来说都不好听，所以我会问你一些建议/提示/想法。

由于

Answer 1

进行AJAX调用以获取新元素。将其附加到您的包含div。然后使用 - ＆gt;

按名称对所有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/

Answer 2

我倾向于使用你的第二个建议 - jQuery可以使用category1类快速获取所有元素，并且很容易将文本从那里解析成数组。然后你需要做的就是找出新元素之前的元素，在DOM中找到它，然后在它之后添加它。

Answer 3

阅读完你的问题后会想到两件事：

您正在谈论列表，但您正在使用DIV。这不是世界末日，但使用无序列表（<ul>）在语义上更合适。
由于你提出了jQuery，这个问题引起了jQuery Templates plugin的使用。您正在尝试进行客户端数据绑定，这正是jQuery模板将帮助您做的事情。

更新div列表

3 个答案: