Question

33

jQuery index() in vanilla javascript

rated 0 times [ 36] [ 3] / answers: 1 / hits: 22738 / 12 Years ago, sat, december 1, 2012, 12:00:00

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??

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

trayvon

Add To Favorites

Follow

Total Points: 35

Total Questions: 117

Total Answers: 88

Location: Guernsey

Member since Tue, Jul 6, 2021

3 Years ago

trayvon questions

1 Bootstrap modal UncaughtType Error on modal loading

Sun, Apr 24, 22, 00:00, 2 Years ago

1 Iterate through array of objects using javascript

Wed, Feb 9, 22, 00:00, 2 Years ago

1 Error in function createFiberFromTypeAndProps in ./node_modules/react-dom/cjs/react-dom.development.js:25058

Sun, May 23, 21, 00:00, 3 Years ago

1 Why could window scroll event not being fired

Tue, Jul 14, 20, 00:00, 4 Years ago

1 Error: Connecting to a SFTP server with ssh2-sftp-client in a AWS lambda function throws a time out

Thu, Jun 4, 20, 00:00, 4 Years ago

View All

answered 12 Years ago karyme · Accepted 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)