重新安排/分配DIV而无需重新插入DOM
我有几个DIV，其内容具有data-weight属性，该属性通过AJAX定期更新。
我在循环中对它们进行排序，我在迭代来自ajax-request的新值。
由于数据权重可以随时更新为任何值，因此订单可以从更新更改为更新。
我的排序逻辑似乎有缺陷（至少可以说是））因为它只通过.next()将每个元素与下一个元素进行比较，所以你必须点击“按数据权重排序”最大值。 4个元素的4次，直到它们被排序（参见下面的小提琴）
重要的是要知道要排序的DIV包含外部资源，如图像，video等，因此重要的是它们被移动而不是重新创建，因为我认为当重新插入DOM时，包含的资源会被重新加载这对我的用例来说是不可接受的。
由于很难描述和理解，这是我的小提琴：
http://jsfiddle.net/PdGTK/5/
更新
虽然主要问题已经解决，但仍然存在这样的问题：当包括fe Youtube-Videos时，每次重新排序DIV时都会重新加载它们，即使video在DOM中没有改变位置也是如此。 a）看起来很奇怪，b）中断video播放。 阅读有关该主题的更多信息，在DOM中移动iframe似乎总是让他们重新加载他们的内容 – 这有多愚蠢？
对于YTvideo，小提琴更新为固定数据权重1，因此它始终保持在最顶层。
http://jsfiddle.net/PdGTK/10/
想法非常欢迎!!
这是我想到的第一种方式：
$("#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对象（ $articles ）。 然后它根据data-weight属性对jQuery对象中的项进行排序。 然后它以新的顺序遍历它们并将它们附加到包装器 – 注意当你.append()一个已经在DOM中的项目时它会被移动。
这是你如何排序它：
var $wrapper = $('#wrapper'), $art = $wrapper.children('.article'); $art.sort(function(a, b) { return +$(a).data('weight') - +$(b).data('weight'); }) .each(function() { $wrapper.append(this); });
我需要重新排序元素而不重新插入DOM。 您可以通过修改CSS属性来完成。
对于外部容器集CSS属性：
display: flex; flex-direction: column;
并为每个元素集：
order: X;
其中X按升序增长。