重新排列/调整DIV而不重新插入到DOM中 [英] Re-arranging / -sorting DIVs without re-inserting into DOM

问题描述

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

我在循环中排序它，来自ajax请求的新值。

由于可以随时将数据权重更新为任何值，所以该命令可以从更新完全更改到更新。 p>

我的排序逻辑似乎有缺陷（至少说），因为它只通过 .next（）所以你必须点击按数据重量排序最大。 4个元素，直到它们被排序（见下面的小提琴）

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

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

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

更新

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

小提琴更新为固定数据权重为1的YT视频，所以它总是保持在顶部。

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

想法非常受欢迎!!

解决方案

这是第一种想法：

  $（＃sortButton）。on（click，function（）{
 var $ wrapper = $（'＃wrapper'），
 $ articles = $ wrapper.find（' ）; 
 [] .sort.call（$ articles，function（a，b）{
 return + $（a）.attr（'data-weight'） -  + $（b） （'data-weight'）; 
}）; 
 $ articles.each（function（）{
 $ wrapper.append（this）; 
}）; 
}）; 
  

似乎要工作： http://jsfiddle.net/PdGTK/6/

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

I have several DIVs with content that have a data-weight-attribute which is updated regularly via AJAX.

I sort them in the loop where I iterate over the new values coming from the ajax-request.

Because the data-weight can be updated any time to any value, the order can change totally from update to update.

My sorting-logic seems flawed (to say the least ;)) because it only compares every element to its next via .next() so you have to click "Sort by data-weight" max. 4 times for 4 elements until they are sorted (see fiddle below)

It is important to know that the DIVs to be sorted contain external ressources like images, videos etc so it's important they are moved around and not re-created, because I think when re-inserted into the DOM, the contained ressources get re-loaded which is unacceptable for my use-case.

As it's hard to descripte and maybe understand, here is my fiddle:

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

Update

While the main problem is solved, there is still the problem that when f.e. Youtube-Videos are included, they are re-loaded every time the DIVs are reordered, even if the video doesn't change place in the DOM. That a) looks weird and b) interrupts the video-play. Reading more about the topic, moving iframes in the DOM always seems to make them reload their content - how stupid is that?

Fiddle is updated with a fixed data-weight of 1 for the YT-video so it always stays on top.

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

Ideas very welcome!!

解决方案

Here's the first way that came to mind:

$("#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);
    });
});

Seems to work: http://jsfiddle.net/PdGTK/6/

Basically what that is doing is creating a jQuery object ($articles) that contains all of the articles. Then it sorts the items in the jQuery object according to their data-weight attribute. Then it goes through them in the new order and appends them to the wrapper - noting that when you .append() an item that is already in the DOM it gets moved.

这篇关于重新排列/调整DIV而不重新插入到DOM中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！