重新排列/ -sorting DIVs而不重新插入DOM

Question

我有几个DIVs，其内容有一个数据权重属性，通过AJAX定期更新。

我在循环中对它们进行排序，在循环中迭代来自ajax-请求的新值。

因为数据权重可以随时更新到任何值，所以顺序可以从更新完全更改到更新。

我的排序逻辑似乎有缺陷(至少可以这么说)，因为它只通过.next()将每个元素与其下一个元素进行比较，所以您必须单击“按数据权重排序”最大值。对4种元素进行4次排序，直到它们被分类为止(见下面的小提琴)

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

很难描述和理解，这是我的小提琴：

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

更新

在解决主要问题的同时，仍然存在着f.e时的问题。Youtube--视频包括在内，每次DIVs被重新排序时，它们都会被重新加载，即使视频在DOM中没有改变位置。( a)看上去很奇怪，b)打断了视频播放。阅读更多关于这个主题的文章，在DOM中移动iframes似乎总是让它们重新加载它们的内容--这有多愚蠢？

小提琴是更新的一个固定的数据重量为1的YT视频，所以它总是停留在顶部。

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/

基本上，这是创建一个包含所有文章的jQuery对象($articles)。然后根据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/

Answer 3

我也需要重新排序元素，而不需要重新插入DOM。您可以通过修改CSS属性来做到这一点。

对于外部容器集CSS属性：

display: flex;
flex-direction: column;

对于每一个元素集：

order: X;

其中X以升序生长。