Using Jquery to sort divisions in a descending order regarding ID values

Question

Suppose that I have some dynamic code that returns:

<div id="data-2">data 2</div>
<div id="data-10">data 10</div>
<div id="data-1">data 1</div>

How do I use Jquery to sort the divisions in a descending order so that I end up having this HTML:

<div id="data-10">data 10</div>
<div id="data-2">data 2</div>
<div id="data-1">data 1</div>

Any thoughts?

possible duplicate of [Sort Divs in Jquery Based on Attribute 'data-sort'?](http://stackoverflow.com/questions/6133723/sort-divs-in-jquery-based-on-attribute-data-sort) — SSA, Apr 28 '15 at 15:02

score 2 · Answer 1 · answered Apr 28 '15 at 15:00

2

You can use :

 $('div').sort(function (a, b) {
   var contentA =parseInt( $(a).attr('id').replace('data-',''));
   var contentB =parseInt( $(b).attr('id').replace('data-',''));
   return (contentA > contentB) ? -1 : (contentA < contentB) ? 1 : 0;
 });

answered Apr 28 '15 at 15:00

Milind Anantwar

81,290
25
94
125

Radonirina Maminiaina · Answer 2 · 2015-04-29T06:19:05.123

This may help you!

var resultSort = [];

    $('.data').each(function(index) {
        var getId = $(this)[0].id;
        var splitedId = getId.split('-')[1];
        resultSort.push(splitedId);
        // sort the the array
        var sorted = resultSort.sort(function(x,y){
            return x[0] - y[0];
        });
        var div = '<div id="data-' + sorted[index] +'">data ' + sorted[index] + '</div>';
        $(div).appendTo('#result');
    });

Demo: http://jsfiddle.net/60rmg5v1/

UPDATE

var resultSort = [];
$('.data').each(function(index) {
    var getId = $(this)[0].id;
    var splitedId = getId.split('-')[1];
    resultSort.push(splitedId);
    // sort the the array
});
var sorted = resultSort.sort(function(a,b){
        return b - a;
    });

for ( var i = 0; i < sorted.length; i ++ ) {
    var div = '<div id="data-' + sorted[i] +'">data ' + sorted[i] + '</div>';
    $(div).appendTo('#result');
}

Demo

Thanks, but it shows: data 10 "data 1 data 2 This is the sorted element data 10 data 1 data 2" rather than descending data.. — Ismail, Apr 28 '15 at 15:24
I updated the demo, you can now check if it works for you! :) Enjoy it! :) — Radonirina Maminiaina, Apr 29 '15 at 06:20

score 0 · Accepted Answer · edited May 23 '17 at 11:50

This answer helped: How to order divs by id in javascript?

<div id="container">
  <div id="data-2">data 2</div>
  <div id="data-10">data 10</div>
  <div id="data-1">data 1</div>
</div>

<script>
var main = document.getElementById( 'container' );

[].map.call( main.children, Object ).sort( function ( a, b ) {
    return +b.id.match( /\d+/ ) - +a.id.match( /\d+/ );
}).forEach( function ( elem ) {
    main.appendChild( elem );
});

</script>

Sorts divisions as:

<div id="container">
  <div id="data-10">data 10</div>
  <div id="data-2">data 2</div>
  <div id="data-1">data 1</div>
</div>

Thank you everyone!!

Using Jquery to sort divisions in a descending order regarding ID values

3 Answers3