jquery - 重新排列/排序 DIV，无需重新插入 DOM

Question

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

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

由于数据权重可以随时更新为任何值，因此更新顺序可以完全改变。

我的排序逻辑似乎有缺陷(至少可以说；))，因为它仅通过 .next() 将每个元素与其下一个元素进行比较，因此您必须单击“按数据权重排序”最大限度。 4 个元素 4 次，直到它们被排序(参见下面的 fiddle )

重要的是要知道要排序的 DIV 包含图像、视频等外部资源，因此移动它们而不是重新创建它们很重要，因为我认为当重新插入到 DOM 中时，包含的资源会得到重新加载，这对于我的用例来说是 Not Acceptable 。

由于很难描述和理解，这是我的 fiddle :

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

更新

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

Fiddle 已针对 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/

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