重新安排/分配DIV而无需重新插入DOM

Question

我有几个DIV,其内容具有data-weight属性,该属性通过AJAX定期更新.

我在循环中对它们进行排序,迭代来自ajax-request的新值.

由于数据权重可以随时更新为任何值,因此订单可以从更新更改为更新.

我的排序逻辑似乎有缺陷(至少可以说是))因为它只将每个元素与下一个元素进行比较,.next()所以你必须单击"按数据权重排序"最大值.4个元素的4次,直到它们被排序(见下面的小提琴)

重要的是要知道要排序的DIV包含外部资源,如图像,视频等,因此重要的是它们被移动而不是重新创建,因为我认为当重新插入DOM时,包含的资源会被重新加载这对我的用例来说是不可接受的.

由于很难描述和理解,这是我的小提琴:

http://jsfiddle.net/PdGTK/5/

更新

虽然主要问题已经解决,但仍然存在这样的问题:当包括fe Youtube-Videos时,每次重新排序DIV时都会重新加载它们,即使视频在DOM中没有改变位置也是如此.a)看起来很奇怪,b)中断视频播放.阅读有关该主题的更多信息,在DOM中移动iframe似乎总是让他们重新加载他们的内容 - 这有多愚蠢？

对于YT视频,小提琴更新为固定数据权重为1,因此它始终保持在最顶层.

http://jsfiddle.net/PdGTK/10/

想法非常欢迎!!

Answer 1

这是我想到的第一种方式:

$("#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/

基本上,正在做的是创建一个$articles包含所有文章的jQuery对象().然后它根据jQuery对象的data-weight属性对项目进行排序.然后它以新的顺序遍历它们并将它们附加到包装器 - 注意当你.append()已经在DOM中的项目被移动时.

Answer 2

这是你如何排序它:

var $wrapper = $('#wrapper'),
    $art = $wrapper.children('.article');

$art.sort(function(a, b) {
    return +$(a).data('weight') - +$(b).data('weight');
})
.each(function() {
    $wrapper.append(this);
});

http://jsfiddle.net/dfsq/PdGTK/8/