更新DIV

的名单上有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>

由名称排序里面categories1。

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

所以，我认为这些方式：

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

没有一个听起来不错，所以我会问你一些建议/提示/想法。

谢谢

来源

2011-05-26 markzzz

进行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/

来源

2011-05-26 12:38:41

+1非常优雅的解决方案。如果列表很大，可以将'.empty（）'语句移动到'sort（）'之前，以防止处理时出现无序内容的闪烁。显然'append（）'需要保持最后！ :) – 2011-05-26 12:40:53

@Chris好的建议 - 如果需要的话，这也是放置加载启动画面的好地方。 – 2011-05-26 12:45:27

试过你的例子，但实际上它没有做正确的排序：检查出这个http://jsfiddle.net/rz3Ww/1/：Gabba应该在GTW之前，而不是之后... – markzzz 2011-05-26 13:05:50

我倾向于去与你的第二个建议 - jQuery的可以非常迅速地抓住所有的元素的类型为category1，并且从这里解析文本到一个数组中是很繁琐的。然后，你需要做的是找出哪个元素就在你的新元素之前，在DOM中找到它，然后添加你的元素。

来源

2011-05-26 12:39:11

两件事情浮现在脑海中阅读您的问题后：

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

来源

2011-05-26 12:39:24 Kon

回答

相关问题