Sibling Index (v13)

Revision 13 of this benchmark created by ktmud on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="insertHere"></div>

<script>
var insertHere = document.getElementById("insertHere");
for(var i = 0; i<50; i++) {
var div = document.createElement('DIV')
div.innerHTML = '1';
insertHere.appendChild(div);
}
var div = document.createElement('DIV')
div.innerHTML = '2';
div.id = 'whereami';
insertHere.appendChild(div);
</script>

Setup

function findRow(node) {
      var i = 1;
      while (node.previousSibling) {
        node = node.previousSibling;
        if (node.nodeType === 1) {
          i++;
        }
      }
      return i;
    }
    
    function findRow2(node) {
      return $(node).index();
    }
    
    function findRow3(node) {
      var i = 1;
      while (node = node.previousSibling) {
        if (node.nodeType === 1) {
          ++i
        }
      }
      return i;
    }
    
    function findRow4(node) {
      return [].indexOf.call(node.parentNode.children, node)
    }
    
    (function() {
      var fn = document.body.previousElementSibling ? 'previousElementSibling' : 'previousSibling'; // ie <=8 skips text nodes
    
      findRow5 = function(node) {
        var i = 1;
        while (node = node[fn]) {
          ++i
        }
        return i;
      }
    }());
    
    //previousSibling - good if there are no text nodes 
    findRow6 = function(node) {
      var i = 1;
      while (node = node.previousSibling) {
        ++i
      }
      return i;
    }
    //previousSibling - good if there are no text nodes 
    function findRow6(node) {
      var i = 1;
      while (node = node.previousSibling) {
        ++i
      }
      return i;
    }
    
    function findRow7(node) {
      var children = node.parentNode.childNodes;
      for (var i = 0; i < children.length; i++) {
          if (children[i] === node) {
            return i;
          }
      }
    }
    
    var node = document.getElementById('whereami'); //div node to find

Test runner

Ready to run.

Testing in
TestOps/sec
Original
findRow(node);
ready
jQuery
findRow2(node);
ready
Jack's one
findRow3(node);
ready
Using Array.indexOf
findRow4(node);
ready
using conditional function
findRow5(node);
ready
previousSibling - good if there are no text nodes
findRow6(node);
ready
loop through childNodes
findRow7(node);
ready

Revisions

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