我有几个内容具有data-weight属性的DIV,该属性通过AJAX定期更新。
我在循环中对它们进行排序,迭代来自ajax-request的新值。
由于数据权重可以随时更新为任何值,因此订单可以从更新更改为更新。
我的排序逻辑似乎有缺陷(至少可以说;))因为它只通过.next()
将每个元素与下一个元素进行比较,因此您必须单击“按数据权重排序”最大值。 4个元素的4次,直到它们被排序(见下面的小提琴)
重要的是要知道要排序的DIV包含外部资源,如图像,视频等,所以重要的是它们被移动而不是重新创建,因为我认为当重新插入DOM时,包含的资源得到重新加载,这对我的用例来说是不可接受的。
由于很难描述和理解,这是我的小提琴:
更新
虽然主要问题已经解决,但仍有问题,当f.e.包含Youtube视频,每次重新排序DIV时都会重新加载它们,即使视频在DOM中没有改变位置也是如此。 a)看起来很奇怪,b)中断视频播放。 阅读有关该主题的更多信息,在DOM中移动iframe似乎总是让他们重新加载他们的内容 - 这有多愚蠢?
对于YT视频,小提琴更新时固定数据权重为1,因此它总是保持在最顶层。
非常欢迎创意!
答案 0 :(得分:16)
这是我想到的第一种方式:
$("#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中的项时它会被移动。
答案 1 :(得分: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);
});
答案 2 :(得分:1)
我需要重新排序元素而不重新插入DOM。 您可以通过修改CSS属性来实现。
对于外部容器集CSS属性:
order: X;
并为每个元素集:
use "-" before number
其中X按升序增长。