CODEWITHSUNDEEP
javascriptjqueryhtml
Mehul Chachada
Mehul Chachada

Reputation: 583

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

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>

Upvotes: 1

Views: 1117

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

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>

Upvotes: 2

Related Questions