CODEWITHSUNDEEP
jqueryhtmlsorting
Nishant Jani
Nishant Jani

Reputation: 1993

Sort HTML Data in DIV tags

For my html , i dont have the data in tables , but they are structured in tags

its is something like 

<div id="1"> name=abc id=501  </div>
<div id="2"> name=sdc id=502  </div>
<div id="3"> name=xyz id=503  </div>

Can i sort this using jquery/javascript php anything ! ?

Note the number of are variable , i.e decieded dynamically

Upvotes: 0

Views: 2149

Answers (3)

nbrooks
nbrooks

Reputation: 18233

DEMO

I changed your html to use data-attributes (the correct way to store data in your markup); it now looks like this <div id='2' data-name='sdc' data-id='502'>sdc</div>. This also allows jQuery to retrieve the property readily using the .data() method.

This sorts by name. To sort by id instead, change return a.name > b.name ? 1 : -1; to return a.id > b.id ? 1 : -1;

$(function() {
    var alphaSort = $("div").map(function() {
        return {
            htmlId: this.id,
            name: $(this).data('name'),
            id: $(this).data('id')
        };
    }).toArray().sort(function(a, b) {
        return a.name > b.name ? 1: -1;
    });

    $.each(alphaSort, function(i, val) {
        if( $('div[data-name]').last().is('#'+val.htmlId) ) {
            return true; //continue               
        }
        $('div[data-name]').last().after($('#'+val.htmlId));
    });
});​

Upvotes: 1

Oscar Jara
Oscar Jara

Reputation: 14187

I think you can do better using this way and also have the ids and names sorted as you need.

Live DEMO:

http://jsfiddle.net/oscarj24/VJ3ZR/

HTML:

<div id="3"> name=xyz id=503  </div>
<div id="1"> name=abc id=501  </div>
<div id="2"> name=sdc id=502  </div>

​JS:

var arrName = new Array();
var arrId = new Array();

$(function(){

    $('div').map(function(){
        var data = $(this).text().match(/name=(.*) id=(.*)/);
        arrName.push($.trim(data[1]));
        arrId.push(parseInt($.trim(data[2])));      
    });

    arrName.sort();
    arrId.sort();

    alert('Sorted names: ' + arrName + '\nSorted ids: ' + arrId);
});

Output:

Sorted names: abc,sdc,xyz / Sorted ids: 501,502,503

Upvotes: 0

blueiur
blueiur

Reputation: 1507

i don't know you absolute want but i try it' sort by id then sort by name.

http://jsfiddle.net/k9aPj/3/ 

// html
<div id='container'>    
    <div id="3"> name=xyz id=503  </div>
    <div id="1"> name=abc id=501  </div>
    <div id="2"> name=sdc id=502  </div>
</div>


// js code
var parent = document.getElementById('container');
var childs = parent.childNodes;
childs = Array.prototype.slice.call(childs).filter(function(el){
        return el.nodeName == "DIV";
     });

childs.sort(function(a, b){    
    var aValues = a.innerText.split(' ');
    var aName = aValues[0].split("=")[1];
    var aId = aValues[1].split("=")[1];

    var bValues = b.innerText.split(' ');
    var bName = bValues[0].split("=")[1];
    var bId = bValues[1].split("=")[1];

    if( aName != bName ){
       if (aName > bName) return 1;
       if (aName < bName) return -1;
       return parseInt(aId) - parseInt(bId); // sort by id
    }    
});

container.innerHTML = childs.map(function(el){
    return el.outerHTML;
}).join('');

//result is 
name=abc id=501
name=sdc id=502
name=xyz id=503

​

​

Upvotes: 1

Related Questions