tengo la siguiente estructura html:
<div id='main'> <div id='612'> </div> ... <div id='1'> </div> </div>Como puede ver, tengo varios div en orden decreciente y me gustaría hacer un botón que active un script jQuery que pueda ordenar esos div en ambos sentidos (decreciente y creciente). Ya creé el botón y lo vinculé al script, pero no puedo encontrar una manera de ordenar los divs. ¿Es posible?
Editar: publicó el código completo en pastebin: https://pastebin.com/DZWdNMZk
Editar: publicó el código completo en Github si ayuda: https://github.com/mattiac02/divs
Esta es una opción. Configurar la visualización del padre para que se flexione, luego usar js para establecer la propiedad de orden de los hijos. ¡Ojalá la demostración ayude!
document.querySelector("#orderEm") .addEventListener("click", () => { document.querySelectorAll("div > div") .forEach(div => { div.style.order = div.id; }); }); document.querySelector("#reverse") .addEventListener("click", () => { document.querySelector("#container") .classList.toggle("reverse"); }); #container { display: flex; justify-content: space-around; } #container.reverse { flex-direction: row-reverse; } div > div { height: 50px; width: 50px; font-size: 15pt; border: 1px solid black; margin: 1em; display: flex; justify-content: center; align-items: center; } <div id="container" data-sorted="unsorted"> <div id="2">2</div> <div id="3">3</div> <div id="1">1</div> </div> <button id="orderEm">Order 'Em!</button> <button id="reverse">Reverse 'Em!</button>Uno de hacer esto es obtener los elementos en una matriz y ordenar la matriz y volver a agregarlos al div principal:
$('#btnAsc').click(function() { //gets all div children of the main div, this returns a jQuery array with the elements var divs = $('#main div'); //sorts the divs based on the id attribute var ordered = divs.sort(function(a, b) { return $(a).attr('id') - $(b).attr('id'); }); //empty the main div and re-append the ordered divs $('#main').empty().append(ordered) }); $('#btnDesc').click(function(){ var divs = $('#main div'); var ordered = divs.sort(function(a, b) { return $(b).attr('id') - $(a).attr('id'); }); $('#main').empty().append(ordered) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='main'> <div id='612'> 612 </div> <div id='1'> 1 </div> <div id='2'> 2 </div> <div id='3'> 3 </div> <div id='5'> 5 </div> </div> <input type="button" id="btnAsc" value="Asc"> <input type="button" id="btnDesc" value="Desc">