Quiero hacer un elemento DOM que sea cuando cambie la pantalla, el orden de clasificación de los divs sigue siendo el mismo. pero por alguna razón, cambia el orden y no sé cómo ordenarlo. Intenté esto y todavía no se está ordenando solo. Quiero ordenarlos en orden ascendente, por eso están dispersos. Cuando presiono el botón, debería estar ordenado. y la clase 2,3 y 4 se pondrán en el contenedor de clases. Luego, cuando lo presione de nuevo, volverá a <div id="main"> </div> Aquí está mi código:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div class="1"> ONE </div> <div id="main"></div> <div class="3 option"order = "3">Three</div> <div class="2 option"order = "2">TWO</div> <div class="4 option"order = "4">four</div> <div id="button"> press here </div> <div class="container"> <div class="5 option"> five</div> </div> </div> <script> var pressed = 0; let option = document.getElementsByClassName("option"); let container = document.getElementsByClassName('container') let main = document.getElementById('main') document.getElementById('button').addEventListener("click", (e)=>{ ButtonPressed() pressed++ console.log(pressed) }) function ButtonPressed(){ if(pressed % 2 == 0) $(container).append(option).children().each((i) => { $(container).each(() => { return ($(i).data('order') < $(i+1).data('order')) ? 1 : -1; }); }) else $(main).append(container) console.log(pressed) } </script>Debe modificar un poco su selector, solo necesita seleccionar el elemento con la clase de option que son descendientes directos del cuerpo body > .option . Ahora puede ordenar su matriz de options usando el atributo de order y agregarlo al container o a la clase main .
let pressed = 0; const options = $("body > .option"); const main = $('#main'); const container = $('.container'); $('button').click((e) => { ButtonPressed() pressed++ console.log(pressed) }) function ButtonPressed() { const sortedOptions = options.toArray().sort((a, b) => $(a).attr('order') - $(b).attr('order')); if (pressed % 2 == 0) { $(container).before(sortedOptions) } else { $(main).append(sortedOptions); } } <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <div class="1"> ONE </div> <div id="main"></div> <div class="3 option" order="3">Three</div> <div class="2 option" order="2">TWO</div> <div class="4 option" order="4">four</div> <button id="button"> press here </button> <div class="container"> <div class="5 option"> five</div> </div>