我有几个DIV的内容具有通过
AJAX定期更新的数据权重属性.
我在循环中对它们进行排序,在循环中我迭代了来自ajax请求的新值.
因为数据权重可以随时更新到任何值,所以订单可以完全从更新到更新.
我的排序逻辑似乎有缺陷(至少说),因为它只通过.next()将每个元素与下一个元素进行比较,所以你必须单击“按数据重量排序”最大值. 4个元素4次,直到它们被分类(见下面的小提琴)
重要的是要知道要排序的DIV包含外部ressources像图像,视频等,所以重要的是他们被移动,而不是重新创建,因为我认为当重新插入到DOM中时,包含的资源被重新加载这对我的用例是不可接受的.
由于很难描述和理解,这里是我的小提琴：
http://jsfiddle.net/PdGTK/5/
更新
当主要问题解决时,仍然存在的问题是,Youtube-video包含在内,即使视频没有改变DOM的位置,每次重新排序DIV时都会重新加载.那a)看起来很奇怪,b)中断视频播放.
阅读更多关于该主题的内容,在DOM中移动iframe总是让他们重新加载他们的内容 – 这是多么愚蠢？
小提琴更新为YT视频的固定数据权重1,所以它始终保持在顶部.
http://jsfiddle.net/PdGTK/10/
想法非常欢迎！
解决方法
这是第一个想到的方法：
$("#sortButton").on("click",function () {
var $wrapper = $('#wrapper'),$articles = $wrapper.find('.article');
[].sort.call($articles,function(a,b) {
return +$(a).attr('data-weight') - +$(b).attr('data-weight');
});
$articles.each(function(){
$wrapper.append(this);
});
});
似乎工作：http://jsfiddle.net/PdGTK/6/
基本上做的是创建一个包含所有文章的jQuery对象($articles).然后根据它们的data-weight属性对jQuery对象中的项进行排序.然后它按照新的顺序遍历它们,并将它们附加到包装器中 – 注意当你已经在DOM中的.append()项被移动时.