How to reorder the div elements (already rendered) using JavaScript

Question

I need to sort the below div elements based on fare values. I need to sort based on key:value pair which look like [{key:"1",value=""},{..},{..}].

The below snippet is my HTML code

<div class="panel data" key="1" fare="800"></div>
<div class="panel data" key="2" fare="300"></div>
<div class="panel data" key="3" fare="500"></div>

the below structure is how the output I wanted.

[
  {key:"2",value:"300"},
  {key:"3",value:"500"},
  {key:"1",value:"800"}
]

Also I need to reorder the div as per above structure.

Please guide me how to achieve this.

did you try to get data to array and sort while in array here is the solution you may interested in this link [https://stackoverflow.com/questions/1129216/sort-array-of-objects-by-string-property-value-in-javascript] — melic, Nov 06 '17 at 06:19
I need to sort based on numeric values. I tried to sort but its not ordering properly. — Charan Kumar, Nov 06 '17 at 06:22
Jonas W. Please guide me how to do it. Since im new to jquery please help me out — Charan Kumar, Nov 06 '17 at 06:24
Possible duplicate of [Sort array of objects by string property value in JavaScript](https://stackoverflow.com/questions/1129216/sort-array-of-objects-by-string-property-value-in-javascript) — guradio, Nov 06 '17 at 06:25

score 1 · Accepted Answer · answered Nov 06 '17 at 06:27

Try this approach using insertBefore

document.querySelector( "#sortByFare" ).addEventListener( "click", function(){
   var panels = document.querySelectorAll( ".panel.data" );
   [].slice.call( panels ).sort( function(a,b){ 
     var aFare = a.getAttribute( "fare" );
     var bFare = b.getAttribute( "fare" );
     if ( aFare < bFare )
     {
        a.parentNode.insertBefore( a, b );
     }
     else
     {
        a.parentNode.insertBefore( b, a );
     }
     return aFare - bFare;
   });
});

<div class="panel data" key="1" fare="800">800
</div>
<div class="panel data" key="2" fare="300">300
</div>
<div class="panel data" key="3" fare="500">500
</div>

<input type="button" value="Sort By Fare" id="sortByFare"/>

It can be generalized further if you refactor the sorting logic as

document.querySelector( "#sortByFare" ).addEventListener( "click", function(){
   var panels = document.querySelectorAll( ".panel.data" );
   sortDomElements( panels, "fare" );
});

document.querySelector( "#sortByKey" ).addEventListener( "click", function(){
   var panels = document.querySelectorAll( ".panel.data" );
   sortDomElements( panels, "key" );
});

function sortDomElements( nodeList, attributeName )
{
  [].slice.call( nodeList ).sort( function(a,b){ 
     var aFare = a.getAttribute( attributeName );
     var bFare = b.getAttribute( attributeName );
     if ( aFare < bFare )
     {
        a.parentNode.insertBefore( a, b );
     }
     else
     {
        a.parentNode.insertBefore( b, a );
     }
     return aFare - bFare;
   });
}

<div class="panel data" key="1" fare="800">800
</div>
<div class="panel data" key="2" fare="300">300
</div>
<div class="panel data" key="3" fare="500">500
</div>

<input type="button" value="Sort By Fare" id="sortByFare"/>

<input type="button" value="Sort By Key" id="sortByKey"/>

Its not working for large number of data. Its reordering in wrong way. — Charan Kumar, Nov 06 '17 at 08:06
@CharanKumar how many number of items? How did you replicated? — gurvinder372, Nov 06 '17 at 08:23

score 0 · Answer 2 · answered Nov 06 '17 at 06:32

I will assume you have them within a parent element you could pick all the child element and loop over comparing the values and build a rewrite string.

var parentEl= document.getElelemtById('parentID')
    for (var j = 0; j < parentEl.childNodes.length; j++) {
            var key = parentEl.childNodes[j].getAttribute('key');
            var fare = parentEl.childNodes[j].getAttribute('fare');
             // compare the fare  here
             // also build your new child div strings here
        }
             // finally output the new child string
             parentEl.innerHTML= yourNewChildString;

Have not tested this, but it should get you what you want.

score 0 · Answer 3 · answered Nov 06 '17 at 06:35

0

<div id="list">
    <div class="listing-item" data-fare="800">800</div>
    <div class="listing-item" data-fare="300">300</div>
    <div class="listing-item" data-fare="500">500</div>     
</div>



 var divList = $(".listing-item");
divList.sort(function(a, b){ return $(a).data("fare")-$(b).data("fare")});

$("#list").html(divList);

answered Nov 06 '17 at 06:35

Rahul

462
1
4
16

It works properly. But it will affect my javascript fuction because reassigning the html data doesn't loaded in DOM. – Charan Kumar Nov 06 '17 at 07:40
inside "listing-item" div element. I have plenty of elements which generates from the c#. – Charan Kumar Nov 06 '17 at 07:43

How to reorder the div elements (already rendered) using JavaScript

3 Answers3