DIV'leri alfabetik olarak yok etmeden ve yeniden oluşturmadan sırala?

Question

Sayfamdaki bir grup div elemanını bir tuşa basarak sıralamak istiyorum.

Hepsi örneğin basit metin içeriğine sahip:

kullanıcı bir düğmeyi tıkladığında

<div class='sortme'> 
    CCC 
</div> 
<div class='sortme'> 
    AAA 
</div> 
<div class='sortme'> 
    BBB 
</div> 
<div class='sortme'> 
    DDD 
</div> 

, alfabetik sırayla yeniden düzenlenmelidir. Açıkçası, bunu yapmanın bir kaç yolu var, en açıkçası tüm içeriği bir diziye alabiliriz, diziyi sıralayabiliriz ve HTML’yi buna göre yeniden oluşturabiliriz.

Bu

böyle bir çözümün bir örnek: Ancak

http://jsfiddle.net/hibbard_eu/C2heg/

, bu zaten kullanılmakta olan kodun bir sürü güzel oyun olmaz, ve ben sadece hareket edebilmek için umuyordum yıkıcı hiçbir şey yapmadan etrafında dolaşır. Mümkün mü?

Answer 1

1. üzere (kendi sıralanmış halde) sort()
2. Reattach ile elemanın dizisi appendTo()

$('.sortme').sort(function(a, b) { 
 
    if (a.textContent < b.textContent) { 
 
    return -1; 
 
    } else { 
 
    return 1; 
 
    } 
 
}).appendTo('body');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div class='sortme'> 
 
    CCC 
 
</div> 
 
<div class='sortme'> 
 
    AAA 
 
</div> 
 
<div class='sortme'> 
 
    BBB 
 
</div> 
 
<div class='sortme'> 
 
    DDD 
 
</div>

Answer 2

kullanımı eklerine sahip.

var $divs = $("div.box"); 

$("div.box").on("click", function (e) { 
    alert("I'm an original"); 
}); 

$('#alphBnt').on('click', function() { 
    var alphabeticallyOrderedDivs = $divs.sort(function (a, b) { 
     return $(a).find("h1").text() > $(b).find("h1").text(); 
    }); 

    alphabeticallyOrderedDivs.each(function (i, item) { 
     $("#container").append(item); 
    }); 
}); 

$('#numBnt').on('click', function() { 
    var numericallyOrderedDivs = $divs.sort(function (a, b) { 
     return $(a).find("h2").text() > $(b).find("h2").text(); 
    }); 

    numericallyOrderedDivs.each(function (i, item) { 
     $("#container").append(item); 
    }); 
}); 

Fiddle

Answer 3

x bulunuyorsa .appendChild (x) elemanın son çocuğu olarak x ekler basitçe hatta eleman

function sortThem(s) { 
    Array.prototype.slice.call(document.body.querySelectorAll(s)).sort(function sort (ea, eb) { 
     var a = ea.textContent.trim(); 
     var b = eb.textContent.trim(); 
     if (a.textContent < b.textContent) return -1; 
     if (a.textContent > b.textContent) return 1; 
     return 0; 
    }).forEach(function(div) { 
     div.parentElement.appendChild(div); 
    }); 
} 
// call it like this 
sortThem('div.sortme'); 

jQuery

olmadan oldukça Yapılabilir DOM, mevcut konumdan hareket ettirilir, bu nedenle, herhangi bir jimnastik için tek bir yerde kaldırmak ve başka bir yere eklemek gerekmez