jQuery sort by numerical property (v9)

Revision 9 of this benchmark created on September 16, 2014

Description

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

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