Ordina i DIV in ordine alfabetico senza distruggerli e ricrearli?

Question

Mi piacerebbe essere in grado di ordinare un gruppo di elementi div sulla mia pagina con un clic di un pulsante.

Tutti loro hanno un contenuto di testo semplice, ad esempio:

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

Quando l'utente fa clic su un pulsante, essi dovrebbero essere riorganizzate in ordine alfabetico. Ovviamente c'è un numero di modi per farlo, ovviamente è possibile ottenere tutti i contenuti in un array, ordinare l'array e ricreare l'HTML basato su quello.

Questo è un esempio di una tale soluzione:

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

Tuttavia, questo non sarebbe bello giocare con un sacco di codice già in uso, e speravo di essere in grado di spostare semplicemente il si diverte senza fare nulla di distruttivo. È possibile?

Answer 1

1. ordinare l'array elemento con sort()
2. Ricollegare (nel loro stato ordinato) con 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

Usa accodamento.

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

Può essere fatto abbastanza semplice anche senza jQuery

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

elemento .appendChild (x) aggiunge x come l'ultimo figlio di elemento, se x esiste in il DOM, viene spostato dalla posizione corrente, quindi non è necessario alcun tipo di ginnastica per rimuoverlo in un posto e aggiungerlo nell'altro