Переустановка/-сортирование 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/

Идеи очень приветствуются!!

Ответ 1

Вот первый способ, который пришел на ум:

$("#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), который содержит все статьи. Затем он сортирует элементы в объекте jQuery в соответствии с их атрибутом data-weight. Затем он проходит через них в новом порядке и добавляет их в оболочку - отмечая, что когда вы .append() элемент, который уже находится в DOM, он перемещается.

Ответ 2

Вот как вы можете сортировать его:

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/

Ответ 3

Мне нужно переупорядочить элементы без повторной установки в DOM. Вы можете сделать это, изменив свойство CSS.

Для свойства CSS для внешнего контейнера:

display: flex;
flex-direction: column;

и для каждого набора элементов:

order: X;

где X возрастает в порядке возрастания.