Re-arranging / -sorting DIVs without re-inserting into DOM

Question

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!!

Answer 1

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.

Answer 2

This is how you can sort it:

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/