How to sort divs using sort with custom data

Question

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>

So, when your div goes to `container`, will 5 be also sorted wrt to other option field. Also, when it toggle back to `main` div, will `five` div be part of it. — Hassan Imam, Sep 16 '21 at 13:47
yes. Then five would be left on container and the other four will go back to main — Renoissance, Sep 16 '21 at 14:09

score 0 · Accepted Answer · answered Sep 17 '21 at 04:53

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>

How to sort divs using sort with custom data

1 Answers1