Sibling Index (v9)

Revision 9 of this benchmark created by Jack on

Preparation HTML

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

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;
            }
    }());
    
    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

Revisions

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