palaѕн palaѕн - 1 year ago 116
Javascript Question

jQuery index() in vanilla javascript

As per the jQuery api, the complementary operation to .get(), which accepts an index and returns a DOM node,

can take a DOM node and returns an index. Suppose we have a simple unordered list on the page:

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

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 Source

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)