How to re-arrange html elements order of display with javascript or jQuery?

Question

I am trying to re-arrange the order of item based on a certain value that particular div or element holds for example here is the following snippet

$(document).ready(function() {
  $("button").on("click", function() {

    var spanElemenet = document.getElementsByClassName("rs");
    var stringInp = [];
    var numConv = [];
    var sorted;
    for (var counter = 0; counter < spanElemenet.length; counter++) {
      stringInp[counter] = spanElemenet[counter].innerHTML;
    }
    numConv = stringInp.map(Number);
    for (var i = 1; i < (spanElemenet.length); i++) {
      for (var j = 0; j < (spanElemenet.length) - 1; j++) {
        if (numConv[j] > numConv[j + 1]) {
          sorted = numConv[j];
          numConv[j] = numConv[j + 1];
          numConv[j + 1] = sorted;

        }
      }
    }
    //This loop is just to display output of sorted list
   for(var k = 0; k< spanElemenet.length;k++)
   {
     $("#output").append(numConv[k] + "<br>");
   }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="item">One : <span id="s1" class="rs">400</span></div>
  <div class="item">Two : <span id="s2" class="rs">1200</span></div>
  <div class="item">Three : <span id="s3" class="rs">5000</span></div>
  <div class="item">Four : <span id="s4" class="rs">1096</span></div>
  <div class="item">Five : <span id="s5" class="rs">99 </span></div>
</div>
<button>Re order me</button>
<div id="output">

</div>

Until now i am able to get value from HTML and sort them in ascending order the main part is to now display the whole elements inside container based on this order and also along with its div element

The O/P i am expecting would be like this :

<div id="container">
  <div class="item">Five : <span id="s5" class="rs">99 </span></div>
  <div class="item">One : <span id="s1" class="rs">400</span></div>
  <div class="item">Four : <span id="s4" class="rs">1096</span></div>
  <div class="item">Two : <span id="s2" class="rs">1200</span></div>
  <div class="item">Three : <span id="s3" class="rs">5000</span></div>
</div>
<button>Re order me</button>

Have you Googled How to re-arrange html elements order of display with javascript or jQuery? Several promising-looking results there, no? — Pekka
– Pekka, Commented Jul 30, 2017 at 19:34

Rory McCrossan · Accepted Answer · 2017-07-30 19:37:14Z

2

To do what you require you simply need to implement your own sort() logic on the .item elements, which reads and compares the text from their child .rs elements. Something like this:

$("button").on("click", function() {
  $('#container .item').sort(function(a, b) {
    return parseInt($(a).find('.rs').text(), 10) - parseInt($(b).find('.rs').text(), 10);
  }).appendTo('#container');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="item">One : <span id="s1" class="rs">400</span></div>
  <div class="item">Two : <span id="s2" class="rs">1200</span></div>
  <div class="item">Three : <span id="s3" class="rs">5000</span></div>
  <div class="item">Four : <span id="s4" class="rs">1096</span></div>
  <div class="item">Five : <span id="s5" class="rs">99 </span></div>
</div>
<button>Re order me</button>

answered Jul 30, 2017 at 19:37

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

5 Comments

Mehul Chachada Over a year ago

can you explain me why you have passed 10 as an argument inside parseInt()

Rory McCrossan Over a year ago

It's the radix: developer.mozilla.org/en/docs/Web/JavaScript/Reference/…

Mehul Chachada Over a year ago

and is there any way to get the order of element back to its initial order with a different button click event

Rory McCrossan Over a year ago

Yes, you'd need to store the original order of elements (in an array for example) then reset it under that button click. I'd suggest starting a new question about that if you require

Mehul Chachada Over a year ago

if you can just edit the answer here would be great because it would be like an extension of this question rather actually being a question. i hope you don't mind :)

Collectives™ on Stack Overflow

How to re-arrange html elements order of display with javascript or jQuery?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related