DOM'a yeniden girmeden DIV'leri yeniden düzenleme/-sorting

Question

AJAX aracılığıyla düzenli olarak güncellenen bir veri ağırlığı özniteliğine sahip içerikli birkaç DIV var.

Ajax isteğinden gelen yeni değerler üzerinden yinelemeyi bu döngüye yerleştiriyorum.

Veri ağırlığı, istediğiniz zaman herhangi bir değere güncellenebileceğinden, güncelleştirme, güncellemeden güncelleştirmeye tamamen değişebilir.

Sıralama-mantığım hatalı görünüyor (en azından;)) çünkü her elemanı .next() aracılığıyla karşılaştırır, böylece "Veri ağırlığına göre sırala" seçeneğini tıklatmanız gerekir. Sıralanıncaya kadar 4 eleman için 4 kez (aşağıdaki fiddle'a bakınız)

Sıralanması gereken DIV'lerin resim, video vb. Gibi harici kaynaklara sahip olduğunu bilmek önemlidir. çünkü DOM'a yeniden takıldığında, kullanım durumum için kabul edilemez olan yeniden yüklenmiş olan ressamların yeniden yüklenmesini düşünüyorum. o descripte ve belki anlamak zor gibi

, burada keman olduğunu: Ana sorun çözüldü iken

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

Güncelleme

hala F. E. o sorun var Youtube-Videolar dahil edilir, videolar DOM'ta yer değiştirse bile, DIV'lerin her yeniden düzenlenmesi sırasında yeniden yüklenir. Bu a) garip görünüyor ve b) video oynatmayı keser. Konuyla ilgili daha fazla bilgi edinmek için, DOM'daki iframe'ler her zaman içeriklerinin yeniden yüklenmesini sağlıyor gibi görünüyor - bu ne kadar aptal?

Fiddle, YT-video için 1 sabit bir veri ağırlığı ile güncellenir, böylece her zaman en üstte kalır.

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

Fikirler çok hoş !!

Answer 1

İşte akla gelen ilk yolu:

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

iş gibi gözüküyor:

http://jsfiddle.net/PdGTK/6/ Temelde ne olduğunu tüm makaleleri içeren bir jQuery nesnesi ($articles) yaratıyor yapıyor. Daha sonra jQuery nesnesindeki öğeleri, data-weight özniteliklerine göre sıralar. Daha sonra, yeni düzende bunlardan geçer ve bunları sarıcıya ekler - .append() zaten DOM'da bulunan bir öğenin taşındığını fark eder.

Answer 2

Bu sıralayabilir nasıl: Ben DOM'ye yeniden takılmadan yeniden sipariş elemanları çok ihtiyaç

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/

Answer 3

. CSS özelliğini değiştirerek bunu yapabilirsiniz.Dış kap grubu CSS özellik için

:

display: flex; 
flex-direction: column; 

ve her eleman grubu için

:

order: X; 

artan sırayla artan x.