palaѕн palaѕн - 1 month ago 12
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,

.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

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)

Comments