jQuery sort by numerical property (v6)

Revision 6 of this benchmark created on

Description

http://stackoverflow.com/q/4502967/117068

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div id="original">
  <div timestamp="99">t99</div>
  <div timestamp="999">t999</div>
  <div timestamp="12">t12</div>
  <div timestamp="11">t11</div>
  <div timestamp="10">t10</div>
  <div timestamp="9">t9</div>
  <div timestamp="8">t8</div>
  <div timestamp="7">t7</div>
  <div timestamp="6">t6</div>
  <div timestamp="5">t5</div>
  <div timestamp="4">t4</div>
  <div timestamp="3">t3</div>
  <div timestamp="2">t2</div>
  <div timestamp="1">t1</div>
  <div timestamp="9999">t9999</div>
  <div timestamp="99">t99</div>
  <div timestamp="999">t999</div>
  <div timestamp="12">t12</div>
  <div timestamp="11">t11</div>
  <div timestamp="10">t10</div>
  <div timestamp="9">t9</div>
  <div timestamp="8">t8</div>
  <div timestamp="7">t7</div>
  <div timestamp="6">t6</div>
  <div timestamp="5">t5</div>
  <div timestamp="4">t4</div>
  <div timestamp="3">t3</div>
  <div timestamp="2">t2</div>
  <div timestamp="1">t1</div>
  <div timestamp="9999">t9999</div>
  <div timestamp="99">t99</div>
  <div timestamp="999">t999</div>
  <div timestamp="12">t12</div>
  <div timestamp="11">t11</div>
  <div timestamp="10">t10</div>
  <div timestamp="9">t9</div>
  <div timestamp="8">t8</div>
  <div timestamp="7">t7</div>
  <div timestamp="6">t6</div>
  <div timestamp="5">t5</div>
  <div timestamp="4">t4</div>
  <div timestamp="3">t3</div>
  <div timestamp="2">t2</div>
  <div timestamp="1">t1</div>
  <div timestamp="9999">t9999</div>
  <div timestamp="99">t99</div>
  <div timestamp="999">t999</div>
  <div timestamp="12">t12</div>
  <div timestamp="11">t11</div>
  <div timestamp="10">t10</div>
  <div timestamp="9">t9</div>
  <div timestamp="8">t8</div>
  <div timestamp="7">t7</div>
  <div timestamp="6">t6</div>
  <div timestamp="5">t5</div>
  <div timestamp="4">t4</div>
  <div timestamp="3">t3</div>
  <div timestamp="2">t2</div>
  <div timestamp="1">t1</div>
  <div timestamp="9999">t9999</div>
  <div timestamp="99">t99</div>
  <div timestamp="999">t999</div>
  <div timestamp="12">t12</div>
  <div timestamp="11">t11</div>
  <div timestamp="10">t10</div>
  <div timestamp="9">t9</div>
  <div timestamp="8">t8</div>
  <div timestamp="7">t7</div>
  <div timestamp="6">t6</div>
  <div timestamp="5">t5</div>
  <div timestamp="4">t4</div>
  <div timestamp="3">t3</div>
  <div timestamp="2">t2</div>
  <div timestamp="1">t1</div>
  <div timestamp="9999">t9999</div>
  <div timestamp="99">t99</div>
  <div timestamp="999">t999</div>
  <div timestamp="12">t12</div>
  <div timestamp="11">t11</div>
  <div timestamp="10">t10</div>
  <div timestamp="9">t9</div>
  <div timestamp="8">t8</div>
  <div timestamp="7">t7</div>
  <div timestamp="6">t6</div>
  <div timestamp="5">t5</div>
  <div timestamp="4">t4</div>
  <div timestamp="3">t3</div>
  <div timestamp="2">t2</div>
  <div timestamp="1">t1</div>
  <div timestamp="9999">t9999</div>
  <div timestamp="99">t99</div>
  <div timestamp="999">t999</div>
  <div timestamp="12">t12</div>
  <div timestamp="11">t11</div>
  <div timestamp="10">t10</div>
  <div timestamp="9">t9</div>
  <div timestamp="8">t8</div>
  <div timestamp="7">t7</div>
  <div timestamp="6">t6</div>
  <div timestamp="5">t5</div>
  <div timestamp="4">t4</div>
  <div timestamp="3">t3</div>
  <div timestamp="2">t2</div>
  <div timestamp="1">t1</div>
  <div timestamp="9999">t9999</div>
  <div timestamp="99">t99</div>
  <div timestamp="999">t999</div>
  <div timestamp="12">t12</div>
  <div timestamp="11">t11</div>
  <div timestamp="10">t10</div>
  <div timestamp="9">t9</div>
  <div timestamp="8">t8</div>
  <div timestamp="7">t7</div>
  <div timestamp="6">t6</div>
  <div timestamp="5">t5</div>
  <div timestamp="4">t4</div>
  <div timestamp="3">t3</div>
  <div timestamp="2">t2</div>
  <div timestamp="1">t1</div>
  <div timestamp="9999">t9999</div>
  <div timestamp="99">t99</div>
  <div timestamp="999">t999</div>
  <div timestamp="12">t12</div>
  <div timestamp="11">t11</div>
  <div timestamp="10">t10</div>
  <div timestamp="9">t9</div>
  <div timestamp="8">t8</div>
  <div timestamp="7">t7</div>
  <div timestamp="6">t6</div>
  <div timestamp="5">t5</div>
  <div timestamp="4">t4</div>
  <div timestamp="3">t3</div>
  <div timestamp="2">t2</div>
  <div timestamp="1">t1</div>
  <div timestamp="9999">t9999</div>
  <div timestamp="99">t99</div>
  <div timestamp="999">t999</div>
  <div timestamp="12">t12</div>
  <div timestamp="11">t11</div>
  <div timestamp="10">t10</div>
  <div timestamp="9">t9</div>
  <div timestamp="8">t8</div>
  <div timestamp="7">t7</div>
  <div timestamp="6">t6</div>
  <div timestamp="5">t5</div>
  <div timestamp="4">t4</div>
  <div timestamp="3">t3</div>
  <div timestamp="2">t2</div>
  <div timestamp="1">t1</div>
  <div timestamp="9999">t9999</div>
  <div timestamp="99">t99</div>
  <div timestamp="999">t999</div>
  <div timestamp="12">t12</div>
  <div timestamp="11">t11</div>
  <div timestamp="10">t10</div>
  <div timestamp="9">t9</div>
  <div timestamp="8">t8</div>
  <div timestamp="7">t7</div>
  <div timestamp="6">t6</div>
  <div timestamp="5">t5</div>
  <div timestamp="4">t4</div>
  <div timestamp="3">t3</div>
  <div timestamp="2">t2</div>
  <div timestamp="1">t1</div>
  <div timestamp="9999">t9999</div>
  <div timestamp="99">t99</div>
  <div timestamp="999">t999</div>
  <div timestamp="12">t12</div>
  <div timestamp="11">t11</div>
  <div timestamp="10">t10</div>
  <div timestamp="9">t9</div>
  <div timestamp="8">t8</div>
  <div timestamp="7">t7</div>
  <div timestamp="6">t6</div>
  <div timestamp="5">t5</div>
  <div timestamp="4">t4</div>
  <div timestamp="3">t3</div>
  <div timestamp="2">t2</div>
  <div timestamp="1">t1</div>
  <div timestamp="9999">t9999</div>
  <div timestamp="99">t99</div>
  <div timestamp="999">t999</div>
  <div timestamp="12">t12</div>
  <div timestamp="11">t11</div>
  <div timestamp="10">t10</div>
  <div timestamp="9">t9</div>
  <div timestamp="8">t8</div>
  <div timestamp="7">t7</div>
  <div timestamp="6">t6</div>
  <div timestamp="5">t5</div>
  <div timestamp="4">t4</div>
  <div timestamp="3">t3</div>
  <div timestamp="2">t2</div>
  <div timestamp="1">t1</div>
  <div timestamp="9999">t9999</div>
  <div timestamp="99">t99</div>
  <div timestamp="999">t999</div>
  <div timestamp="12">t12</div>
  <div timestamp="11">t11</div>
  <div timestamp="10">t10</div>
  <div timestamp="9">t9</div>
  <div timestamp="8">t8</div>
  <div timestamp="7">t7</div>
  <div timestamp="6">t6</div>
  <div timestamp="5">t5</div>
  <div timestamp="4">t4</div>
  <div timestamp="3">t3</div>
  <div timestamp="2">t2</div>
  <div timestamp="1">t1</div>
  <div timestamp="9999">t9999</div>
  <div timestamp="99">t99</div>
  <div timestamp="999">t999</div>
  <div timestamp="12">t12</div>
  <div timestamp="11">t11</div>
  <div timestamp="10">t10</div>
  <div timestamp="9">t9</div>
  <div timestamp="8">t8</div>
  <div timestamp="7">t7</div>
  <div timestamp="6">t6</div>
  <div timestamp="5">t5</div>
  <div timestamp="4">t4</div>
  <div timestamp="3">t3</div>
  <div timestamp="2">t2</div>
  <div timestamp="1">t1</div>
  <div timestamp="9999">t9999</div>
  <div timestamp="99">t99</div>
  <div timestamp="999">t999</div>
  <div timestamp="12">t12</div>
  <div timestamp="11">t11</div>
  <div timestamp="10">t10</div>
  <div timestamp="9">t9</div>
  <div timestamp="8">t8</div>
  <div timestamp="7">t7</div>
  <div timestamp="6">t6</div>
  <div timestamp="5">t5</div>
  <div timestamp="4">t4</div>
  <div timestamp="3">t3</div>
  <div timestamp="2">t2</div>
  <div timestamp="1">t1</div>
  <div timestamp="9999">t9999</div>
  <div timestamp="99">t99</div>
  <div timestamp="999">t999</div>
  <div timestamp="12">t12</div>
  <div timestamp="11">t11</div>
  <div timestamp="10">t10</div>
  <div timestamp="9">t9</div>
  <div timestamp="8">t8</div>
  <div timestamp="7">t7</div>
  <div timestamp="6">t6</div>
  <div timestamp="5">t5</div>
  <div timestamp="4">t4</div>
  <div timestamp="3">t3</div>
  <div timestamp="2">t2</div>
  <div timestamp="1">t1</div>
  <div timestamp="9999">t9999</div>
  <div timestamp="99">t99</div>
  <div timestamp="999">t999</div>
  <div timestamp="12">t12</div>
  <div timestamp="11">t11</div>
  <div timestamp="10">t10</div>
  <div timestamp="9">t9</div>
  <div timestamp="8">t8</div>
  <div timestamp="7">t7</div>
  <div timestamp="6">t6</div>
  <div timestamp="5">t5</div>
  <div timestamp="4">t4</div>
  <div timestamp="3">t3</div>
  <div timestamp="2">t2</div>
  <div timestamp="1">t1</div>
  <div timestamp="9999">t9999</div>
  <div timestamp="99">t99</div>
  <div timestamp="999">t999</div>
  <div timestamp="12">t12</div>
  <div timestamp="11">t11</div>
  <div timestamp="10">t10</div>
  <div timestamp="9">t9</div>
  <div timestamp="8">t8</div>
  <div timestamp="7">t7</div>
  <div timestamp="6">t6</div>
  <div timestamp="5">t5</div>
  <div timestamp="4">t4</div>
  <div timestamp="3">t3</div>
  <div timestamp="2">t2</div>
  <div timestamp="1">t1</div>
  <div timestamp="9999">t9999</div>
  <div timestamp="99">t99</div>
  <div timestamp="999">t999</div>
  <div timestamp="12">t12</div>
  <div timestamp="11">t11</div>
  <div timestamp="10">t10</div>
  <div timestamp="9">t9</div>
  <div timestamp="8">t8</div>
  <div timestamp="7">t7</div>
  <div timestamp="6">t6</div>
  <div timestamp="5">t5</div>
  <div timestamp="4">t4</div>
  <div timestamp="3">t3</div>
  <div timestamp="2">t2</div>
  <div timestamp="1">t1</div>
  <div timestamp="9999">t9999</div>
  <div timestamp="99">t99</div>
  <div timestamp="999">t999</div>
  <div timestamp="12">t12</div>
  <div timestamp="11">t11</div>
  <div timestamp="10">t10</div>
  <div timestamp="9">t9</div>
  <div timestamp="8">t8</div>
  <div timestamp="7">t7</div>
  <div timestamp="6">t6</div>
  <div timestamp="5">t5</div>
  <div timestamp="4">t4</div>
  <div timestamp="3">t3</div>
  <div timestamp="2">t2</div>
  <div timestamp="1">t1</div>
  <div timestamp="9999">t9999</div>
  <div timestamp="99">t99</div>
  <div timestamp="999">t999</div>
  <div timestamp="12">t12</div>
  <div timestamp="11">t11</div>
  <div timestamp="10">t10</div>
  <div timestamp="9">t9</div>
  <div timestamp="8">t8</div>
  <div timestamp="7">t7</div>
  <div timestamp="6">t6</div>
  <div timestamp="5">t5</div>
  <div timestamp="4">t4</div>
  <div timestamp="3">t3</div>
  <div timestamp="2">t2</div>
  <div timestamp="1">t1</div>
  <div timestamp="9999">t9999</div>
  <div timestamp="99">t99</div>
  <div timestamp="999">t999</div>
  <div timestamp="12">t12</div>
  <div timestamp="11">t11</div>
  <div timestamp="10">t10</div>
  <div timestamp="9">t9</div>
  <div timestamp="8">t8</div>
  <div timestamp="7">t7</div>
  <div timestamp="6">t6</div>
  <div timestamp="5">t5</div>
  <div timestamp="4">t4</div>
  <div timestamp="3">t3</div>
  <div timestamp="2">t2</div>
  <div timestamp="1">t1</div>
  <div timestamp="9999">t9999</div>
  <div timestamp="99">t99</div>
  <div timestamp="999">t999</div>
  <div timestamp="12">t12</div>
  <div timestamp="11">t11</div>
  <div timestamp="10">t10</div>
  <div timestamp="9">t9</div>
  <div timestamp="8">t8</div>
  <div timestamp="7">t7</div>
  <div timestamp="6">t6</div>
  <div timestamp="5">t5</div>
  <div timestamp="4">t4</div>
  <div timestamp="3">t3</div>
  <div timestamp="2">t2</div>
  <div timestamp="1">t1</div>
  <div timestamp="9999">t9999</div>
  <div timestamp="99">t99</div>
  <div timestamp="999">t999</div>
  <div timestamp="12">t12</div>
  <div timestamp="11">t11</div>
  <div timestamp="10">t10</div>
  <div timestamp="9">t9</div>
  <div timestamp="8">t8</div>
  <div timestamp="7">t7</div>
  <div timestamp="6">t6</div>
  <div timestamp="5">t5</div>
  <div timestamp="4">t4</div>
  <div timestamp="3">t3</div>
  <div timestamp="2">t2</div>
  <div timestamp="1">t1</div>
  <div timestamp="9999">t9999</div>
  <div timestamp="99">t99</div>
  <div timestamp="999">t999</div>
  <div timestamp="12">t12</div>
  <div timestamp="11">t11</div>
  <div timestamp="10">t10</div>
  <div timestamp="9">t9</div>
  <div timestamp="8">t8</div>
  <div timestamp="7">t7</div>
  <div timestamp="6">t6</div>
  <div timestamp="5">t5</div>
  <div timestamp="4">t4</div>
  <div timestamp="3">t3</div>
  <div timestamp="2">t2</div>
  <div timestamp="1">t1</div>
  <div timestamp="9999">t9999</div>
  <div timestamp="99">t99</div>
  <div timestamp="999">t999</div>
  <div timestamp="12">t12</div>
  <div timestamp="11">t11</div>
  <div timestamp="10">t10</div>
  <div timestamp="9">t9</div>
  <div timestamp="8">t8</div>
  <div timestamp="7">t7</div>
  <div timestamp="6">t6</div>
  <div timestamp="5">t5</div>
  <div timestamp="4">t4</div>
  <div timestamp="3">t3</div>
  <div timestamp="2">t2</div>
  <div timestamp="1">t1</div>
  <div timestamp="9999">t9999</div>
</div>

<h1>Results</h1>
<div id="results"></div>

Test runner

Ready to run.

Testing in
TestOps/sec
Original Idea
// get array of elements
var myArray = $("#original div");

// sort based on timestamp attribute
myArray.sort(function(a, b) {

 // convert to integers from strings
 a = parseInt($(a).attr("timestamp"), 10);
 b = parseInt($(b).attr("timestamp"), 10);

 // compare
 if (a > b) {
  return 1;
 } else if (a < b) {
  return -1;
 } else {
  return 0;
 }
});

// put sorted results back on page
$("#results").append(myArray);
ready
Array of hashes
// get array of elements
var myArray = $("#original div");
var timestamps = [];
myArray.each(function(index, element) {
 timestamps.push({
  "timestamp": parseInt($(element).attr("timestamp"), 10),
  "element": element
 });
});

// sort based on timestamp attribute
timestamps.sort(function(a, b) {

 // compare
 if (a.timestamp > b.timestamp) {
  return 1;
 } else if (a.timestamp < b.timestamp) {
  return -1;
 } else {
  return 0;
 }
});

// put sorted results back on page
var elementsToAppend = "";
$(timestamps).each(function(index, element) {
 elementsToAppend += element.element.outerHTML;
});
$("#results").append(elementsToAppend);
ready
Native attribute access similar to original
// get array of elements
var myArray = $("#original div");

// sort based on timestamp attribute
myArray.sort(function(a, b) {

 // convert to integers from strings
 a = parseInt(a.getAttribute("timestamp"), 10);
 b = parseInt(b.getAttribute("timestamp"), 10);

 // compare
 if (a > b) {
  return 1;
 } else if (a < b) {
  return -1;
 } else {
  return 0;
 }
});

// put sorted results back on page
$("#results").append(myArray);
ready
Original (no parseInt)
// get array of elements
var myArray = $("#original div");

// sort based on timestamp attribute
myArray.sort(function(a, b) {

 // convert to integers from strings
 a = $(a).attr("timestamp");
 b = $(b).attr("timestamp");

 // compare
 if (a > b) {
  return 1;
 } else if (a < b) {
  return -1;
 } else {
  return 0;
 }
});

// put sorted results back on page
$("#results").append(myArray);
ready
Native (no parseInt)
// get array of elements
var myArray = $("#original div");

// sort based on timestamp attribute
myArray.sort(function(a, b) {

 // convert to integers from strings
 a = a.getAttribute("timestamp");
 b = b.getAttribute("timestamp");

 // compare
 if (a > b) {
  return 1;
 } else if (a < b) {
  return -1;
 } else {
  return 0;
 }
});

// put sorted results back on page
$("#results").append(myArray);
ready
Test sort
        /*var items_data = items_temp = [];
        var items = $('#original div').detach();
        
        for (var i = 0; i < items.length; i++) {
                var timestamp = items[i].getAttribute('timestamp');
                items_data.push(timestamp);
        };
        
        items_data.sort(function (a, b) {
                if (a > b) {
                        return 1;
                } else if (a < b) {
                        return -1;
                } else {
                        return 0;
                }
        });
        
        for (var i = 0; i < items_data.length; i++) {
                items_temp.push(items.filter('[timestamp="'+items_data[i]+'"]'))
        };
        
        $('#results').html(items_temp);*/
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.