CODEWITHSUNDEEP
jqueryhandlebars.jsjquery-ui-sortablesorting
Jagan K
Jagan K

Reputation: 1057

Sort Div Elements that are stored in a variable using jQuery

I have a HTML dom element stored in a variable. The HTML is generated from handlebar.js & from JSON data using jQuery. I need to sort this according to values from CSV 

var html = "<div id = 'qual'>Qual</div>
<div id = 'exp'>Exp</div>
<div id = 'ExcludeFromSorting'></div>
<div id = 'edu'>Edu</div>
<div class='clear'></div>
<div id = 'int'>Int</div>
<div id = 'ref'>Ref</div>
<div id = 'img'>Img</div>
<div id = 'obj'>Obj</div>";

The HTML is usually be complex, usually be more than 200 lines of code. The html will have lot of div tags with or without id's, nested div's etc. I am using a simple notation here.

I have sortorder in a varibale as csv

var sortorder = "obj,exp,qual,edu,int,ref,img";

But div tag's with the above id's will definetly exist in the generated HTML (var html will definetly have all those divs with corresponding id's.) To keep it simple the var html might have more than 100 div's but these 7 div's 

<div id = "qual">Qual</div>
<div id = "exp">Exp</div>
<div id = "edu">Edu</div>
<div id = "int">Int</div>
<div id = "ref">Ref</div>
<div id = "img">Img</div>
<div id = "obj">Obj/div>

according to var sortorder will definetly exist some where in the var html in shuffled order.

What i need is the same var html but those div's sorted according to the values passed. The other div's in the var html should not get affected.

I guess i am brief enough to explain my requirement, I posted this quesiton already

How to sort div elements according to id from a CSV list using jQuery?

but this method is not working all the time.

Upvotes: 0

Views: 1111

Answers (1)

RafH
RafH

Reputation: 4544

Here is a working example using the swapWith function from Paolo Bergantino posted here. 

// swapWith
// from @Paolo Bergantino
// https://stackoverflow.com/questions/698301/is-there-a-native-jquery-function-to-switch-elements/698386#698386
jQuery.fn.swapWith = function(to) {
    return this.each(function() {
        var copy_to = $(to).clone(true);
        var copy_from = $(this).clone(true);
        $(to).replaceWith(copy_from);
        $(this).replaceWith(copy_to);
    });
};

// return a jQuery object 
function sortDivsByIds($html, ids, current) { 
    current = current || 0;
    // mark items that needs to be sorted
    if (current ==0) {       
        $(ids).each(function(i,elem) {$("#" + elem, $html).addClass('sorter');});
    }
   // reorder / iterates
    $('#' + ids[current], $html ).swapWith( $('.sorter', $html).eq(current) );   
    if (current+1<ids.length) {
        return sortDivsByIds($html, ids, current+1)
    } else {
        //remove marker
        $('.sorter', $html).removeClass('sorter')
        return $html;      
    };
}

Usage 

var html = '<div id = "qual" >Qual</div><div id = "exp" >Exp</div><div id = "edu" >Edu</div><div id = "int"  >Int</div><div class="another">dont sort me</div><div id = "ref" >Ref</div><div>dont sort me 2</div><div id = "img" >Img</div><div id = "obj">Obj</div>';

var sortorder = "obj,exp,qual,edu,int,ref,img";

var $htmlsorted = sortDivsByIds( $('<div></div>', {html:html}), sortorder.split(','));
alert($htmlsorted.html());

Fiddle : http://jsfiddle.net/yiernehr/GtEhj/1/

Upvotes: 3

Related Questions