jQuery sort by numerical property (v2)

Revision 2 of this benchmark created by Andrew Hedges on December 21, 2010

Description

Preparation HTML

<script src="https://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

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

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

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

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

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

Revisions

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

• Revision 1: published by Mike Grace on December 21, 2010
• Revision 2: published by Andrew Hedges on December 21, 2010
• Revision 6: published on September 15, 2014
• Revision 7: published on September 16, 2014
• Revision 8: published on September 16, 2014
• Revision 9: published on September 16, 2014
• Revision 10: published on September 16, 2014