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
– async await, Commented Sep 24, 2021 at 22:33
Does this answer your question? How can I sort elements by numerical value of data attribute? — Heretic Monkey
– Heretic Monkey, Commented Sep 24, 2021 at 22:51
Here is the complete code, maybe is the bootstrap css the reason why i can't get yoours script done pastebin.com/DZWdNMZk — LAC
– LAC, Commented Sep 24, 2021 at 23:16

async await · Accepted Answer · 2021-09-24 22:47:12Z

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, 2021 at 22:47

answered Sep 24, 2021 at 22:40

async await

2,4251 gold badge11 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

LAC Over a year ago

It doesn't work, will post the entire code

LAC Over a year ago

pastebin.com/DZWdNMZk

async await Over a year ago

@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.

LAC Over a year ago

Here github.com/mattiac02/divs Sorry but i'm new to github

async await Over a year ago

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. ♥

Hanlet Escaño · Accepted Answer · 2021-09-24 22:39:50Z

2

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">

answered Sep 24, 2021 at 22:39

Hanlet Escaño

17.4k10 gold badges54 silver badges76 bronze badges

3 Comments

async await Over a year ago

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.

LAC Over a year ago

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 Over a year ago

Here is the entire code with all the files: pastebin.com/DZWdNMZk

Collectives™ on Stack Overflow

Sort div element using jQuery?

2 Answers 2

5 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related