Sort div element using jQuery?

Question

i have the following html structure:

<div id='main'>
    <div id='612'>
    </div>
    ...
    <div id='1'>
    </div>
</div>

As you can see i have several div going in a decreasing order and i wuold like to make a button that activate a jQuery script that can sort those div in both ways (decreasing and increasing). I already created the button and linked it to the script but i can't find a way to sort the divs. Is possible?

Edit: Posted the entire code on pastebin: https://pastebin.com/DZWdNMZk

Edit: Posted the entire code on Github if it any help: https://github.com/mattiac02/divs

depending on how your css looks, you could use the order property under flex display to add an order to the element using js. — async await, Sep 24 '21 at 22:33
Does this answer your question? [How can I sort elements by numerical value of data attribute?](https://stackoverflow.com/questions/14160498/how-can-i-sort-elements-by-numerical-value-of-data-attribute) — Heretic Monkey, Sep 24 '21 at 22:51
Here is the complete code, maybe is the bootstrap css the reason why i can't get yoours script done https://pastebin.com/DZWdNMZk — LAC, Sep 24 '21 at 23:16

async await · Accepted Answer · 2021-09-24T22:47:12.053

3

This is one option. Setting the display of the parent to flex, then using js to set the order property of the children. Hopefully the demonstration helps!

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>

edited Sep 24 '21 at 22:47

answered Sep 24 '21 at 22:40

async await

1,967
1
8
19

It doesn't work, will post the entire code – LAC Sep 24 '21 at 23:12
https://pastebin.com/DZWdNMZk – LAC Sep 24 '21 at 23:31
@Mattia_Cammalleri your provided pastebin code doesnt look like it has any of the suggested changes in it. It would be better to provide a github repo, rather than a pastebin link. – async await Sep 25 '21 at 01:50
Here https://github.com/mattiac02/divs Sorry but i'm new to github – LAC Sep 25 '21 at 08:52
I added a pull request into github that may further help you. As far as things go on stack overflow, I think the answers here are good solutions to your question, and also that this is a duplicate question. I'm always happy to help, but I believe stack is aimed more toward a minimally reproducible issue that is likely to apply to others, so once it is answered it might act as a resource in the future. If you are struggling to understand how to implement the changes, you should search for the specific issues, but your repo does not have the suggested changes nor are you identifying an error. ♥ – async await Sep 27 '21 at 17:39

score 2 · Answer 2 · answered Sep 24 '21 at 22:39

One of of doing this is to get the elements into an array and sort the array and re-append them to the main div:

$('#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">

This is a good way to accomplish this, and restructures the html which could be advantageous in certain situations. It is worth mentioning that if there are any event listeners on the elements inside #main, they will be lost. — async await, Sep 24 '21 at 22:53
Firt option just make the divs disappear. Second option doesn't do anything i don't know what's the problem. Will post the entire code — LAC, Sep 24 '21 at 23:11
Here is the entire code with all the files: https://pastebin.com/DZWdNMZk — LAC, Sep 24 '21 at 23:25

Sort div element using jQuery?

2 Answers2