19

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

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

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

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

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

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

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

更新

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

Fiddle 使用 YT 视频的固定数据权重 1 进行更新，因此它始终保持在顶部。

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

非常欢迎想法！

4

3 回答 3

19

这是我想到的第一种方法：

$("#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 对象 ()。然后它根据它们的data-weight属性对 jQuery 对象中的项目进行排序。然后它以新的顺序遍历它们并将它们附加到包装器中 - 请注意，当您.append()已经在 DOM 中的项目时，它会被移动。

于 2013-04-21T08:29:54.837 回答
8

这是您可以对其进行排序的方式：

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/

于 2013-04-21T08:40:28.057 回答
3

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

对于外部容器设置 CSS 属性：

display: flex;
flex-direction: column;

对于每个元素集：

order: X;

其中X按升序增长。

于 2016-10-19T13:58:49.913 回答