I want to make a DOM element that is when changing screen the sort order of the divs are still the same. but for some reason, it changes the order and I don't know how to sort it. I tried this and it's still not sorting itself. I want to sort them in ascending order that's why they are scattered around When I press the button, It should be sorted out. and the class 2,3 and, 4 will be put to the class container. Then When I press it again, it will go back to the <div id="main"> </div>
Here is my code:
<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>
You need to modify your selector a bit, you need to only select element with option class that are direct descendants of body body > .option. Now you can sort your options array using order attribute and append it to either container or main class.
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>