Переустановка/-сортирование DIV без повторной установки в DOM

У меня есть несколько DIV с содержимым, у которого есть атрибут data-weight, который регулярно обновляется через AJAX.

Я сортирую их в цикле, где я перебираю новые значения, исходящие из ajax-запроса.

Поскольку вес данных может быть обновлен в любое время до любого значения, заказ может полностью измениться с обновления на обновление.

Моя логика сортировки кажется ошибочной (по меньшей мере;)), потому что она сравнивает каждый элемент с его следующим через .next(), поэтому вам нужно нажать "Сортировать по весу данных" макс. 4 раза для 4 элементов, пока они не будут отсортированы (см. Скрипку ниже).

Важно знать, что сортируемые DIV содержат внешние ресурсы, такие как изображения, видео и т.д., поэтому важно, чтобы они перемещались и не воссоздавались, потому что я думаю, что при повторной установке в DOM содержащиеся в них ресурсы перезагружен, что неприемлемо для моего использования.

Как трудно описать и, возможно, понять, вот моя скрипка:

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

Обновление

В то время как основная проблема решена, по-прежнему существует проблема, когда f.e. Youtube-Videos включены, они перезагружаются каждый раз, когда DIVs переупорядочиваются, даже если видео не меняется в DOM. Это а) выглядит странно и б) прерывает видео-игру. Читая больше о теме, перемещение iframes в DOM всегда, кажется, заставляет их перезагружать свой контент - насколько глупо это?

Fiddle обновляется с фиксированным весом данных 1 для YT-видео, поэтому он всегда остается на вершине.

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);
    });
});

var $wrapper = $('#wrapper'),
    $art = $wrapper.children('.article');

$art.sort(function(a, b) {
    return +$(a).data('weight') - +$(b).data('weight');
})
.each(function() {
    $wrapper.append(this);
});

display: flex;
flex-direction: column;

order: X;