Element index

src/prototype/dom/dom.js

@@ -2006,6 +2006,87 @@
   function next(element, expression, index) {
     return _recursivelyFind(element, 'nextSibling', expression, index);
   }
+
+  /**
+   *  Element.index(@element) -> Number
+   *
+   *  Return index of `@element` in siblings.
+   *
+   *  ##### Example
+   *
+   *      language: html
+   *      <ul>
+   *        <div id="div"></div>
+   *        <li id="first"></li>
+   *        <li id="second"></li>
+   *        <li id="third"></li>
+   *        <span id="span">
+   *           <span id="subspan"></span>
+   *        </span>
+   *       </ul>
+   *
+   *  Then:
+   *
+   *      $('div').index();
+   *      // -> 0
+   *
+   *      $('subspan').index();
+   *      // -> 0
+   *
+   *      $('first').index(); 
+   *      // -> 1 
+   *
+  **/
+  function index(element) {
+    var element = $(element);
+    return (element.siblings().length - element.nextSiblings().length);
+  }
+
+  /**
+   *  Element.indexOfType(@element) -> Number
+   *
+   *  Return index of `@element` in siblings based on `tag` of `@element`.
+   *
+   *  ##### Example
+   *
+   *      language: html
+   *      <ul>
+   *        <div id="div"></div>
+   *        <li id="first"></li>
+   *        <li id="second"></li>
+   *        <li id="third"></li>
+   *        <span id="span">
+   *           <span id="subspan"></span>
+   *        </span>
+   *       </ul>
+   *
+   *  Then:
+   *
+   *      $('div').indexOfType();
+   *      // -> 0
+   *
+   *      $('first').indexOfType(); 
+   *      // -> 0
+   *      
+   *      $('second').indexOfType(); 
+   *      // -> 1
+   *      
+  **/
+  function indexOfType(element) {
+    var element = $(element),
+        tagName = element.tagName;
+
+    function match(array, tagName) {
+      return array.pluck('tagName').inject(0, function(n, tag) {
+        if (tag == tagName) {
+          n++ ;
+        }
+        return n;
+      });
+    }
+
+    return (match(element.siblings(), tagName) - match(element.nextSiblings(), tagName)); 
+  }
 
   /**
    *  Element.select(@element, expression...) -> [Element...]
@@ -2178,6 +2259,8 @@
     down:                 down,
     previous:             previous,
     next:                 next,
+    index:                index,
+    indexOfType:          indexOfType,
     select:               select,
     adjacent:             adjacent,
     descendantOf:         descendantOf,

test.new/tests/dom.test.js

@@ -775,6 +775,22 @@ suite('DOM', function () {
     assert(typeof $(dummy.childNodes[0]).next().setStyle == 'function');
   });
 
+  test('#index', function() {
+    assert.equal($("indexTest-div").index(), 0);
+    assert.equal($("indexTest-li1").index(), 1);
+    assert.equal($("indexTest-li2").index(), 2);
+    assert.equal($("indexTest-subspan").index(), 0);
+    assert.equal($("indexTest-span").index(), 5);
+  });
+
+  test("#indexOfType", function() {
+    assert.equal($("indexTest-div").indexOfType(), 0);
+    assert.equal($("indexTest-li1").indexOfType(), 0);
+    assert.equal($("indexTest-li2").indexOfType(), 1);
+    assert.equal($("indexTest-subspan").indexOfType(), 0);
+    assert.equal($("indexTest-span").indexOfType(), 0);
+  });
+
   test('#inspect', function () {
     assert.equal('<ul id="navigation_test">', $('navigation_test').inspect());
     assert.equal('<li class="first">', $('navigation_test').down().inspect());

test.new/views/tests/dom.erb

@@ -362,4 +362,16 @@ body {
 </div>
 
 <div id='elementToViewportDimensions' style='display: none'></div>
-<div id="auto_dimensions" style="height:auto"></div>
+<div id="auto_dimensions" style="height:auto"></div>
+
+
+<ul id="indexTest">
+  <div id="indexTest-div"></div>
+  <li id="indexTest-li1"></li>
+  <li id="indexTest-li2"></li>
+  <li id="indexTest-li3"></li>
+  <li id="indexTest-li4"></li>
+  <span id="indexTest-span">
+    <span id="indexTest-subspan"></span>
+  </span>
+</ul>