jQuery index() in vanilla javascript

Question

As per the jQuery api, the complementary operation to .get(), which accepts an index and returns a DOM node, .index() can take a DOM node and returns an index. Suppose we have a simple unordered list on the page:

<ul>   <li id="foo">foo</li>   <li id="bar">bar</li>   <li id="baz">baz</li> </ul> 

.index() will return the position of the first element within the set of matched elements in relation to its siblings:

alert('Index: ' + $('#bar').index(); 

We get back the zero-based position of the list item:

Index: 1 

I just want to know, how can we do the same using JavaScript??

Answer 1

You can build your own function :

function indexInParent(node) {     var children = node.parentNode.childNodes;     var num = 0;     for (var i=0; i<children.length; i++) {          if (children[i]==node) return num;          if (children[i].nodeType==1) num++;     }     return -1; } 

Demonstration (open the console)