jQuery sort by numerical property (v8)

Revision 8 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
/*// get array of elements
var myArray = $("#original div").get();

myArray.sort(function (a, b) {
    a = a.getAttribute('timestamp');
    b = b.getAttribute('timestamp');
    // compare
    if (a > b) {
        return 1;
    } else if (a < b) {
        return -1;
    } else {
        return 0;
    }
});

$('#results').html(myArray);*/






var d = new Date();

var items_data = items_temp = [];
var items = $('#original div').detach();
console.log(new Date() - d);

for (var i = 0; i < items.length; i++) {
  var timestamp = items[i].getAttribute('timestamp');
  items_data.push(timestamp);
};
console.log(new Date() - d);

items_data.sort(function(a, b) {
  if (a > b) {
    return 1;
  } else if (a < b) {
    return -1;
  } else {
    return 0;
  }
});
console.log(new Date() - d);
for (var i = 0; i < items_data.length; i++) {
  items_temp.push(items.filter('[timestamp="' + items_data[i] + '"]'))
};
console.log(new Date() - d);

$('#results').html(items_temp);
console.log(new Date() - d);
ready

Revisions

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