CODEWITHSUNDEEP
javascriptjqueryhtml
Charan Kumar
Charan Kumar

Reputation: 45

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

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.

Upvotes: 1

Views: 981

Answers (3)

Rahul
Rahul

Reputation: 482

<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);

Upvotes: 0

Maccabeus
Maccabeus

Reputation: 89

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.

Upvotes: 0

gurvinder372
gurvinder372

Reputation: 68393

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

Upvotes: 1

Related Questions