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)

Answer 2

I've modified Travis J answer to not include TextNodes and made a function out of it.

You can run it in the console and see (on stackoverflow).

Classic way:

function getNodeindex( elm ){ 
    var c = elm.parentNode.children, 
        i = c.length;
        
    while(i--) 
      if( c[i] == elm ) 
        return i
}

With ES2015:

const getNodeindex = elm => [...elm.parentNode.children].findIndex(c => c == elm)

// or

const getNodeindex = elm => [...elm.parentNode.children].indexOf(elm)

Demo:

 const getNodeindex = elm => [...elm.parentNode.children].indexOf(elm)

 <button onclick="console.log( getNodeindex(this) )">get index</button> <button onclick="console.log( getNodeindex(this) )">get index</button> <button onclick="console.log( getNodeindex(this) )">get index</button>

---

I also want to point to another thread on the same matter, which has a great answer (for people seeking older IE support)

Answer 3

No loops needed, call Array#indexOf on .parentElement.children :

const element = document.querySelector('#baz');

[].indexOf.call(element.parentElement.children, element);
// => 2

You can even call it on a random list of elements, just like you can in jQuery:

const list = document.querySelectorAll('li');
const element = document.querySelector('#baz');

[].indexOf.call(list, element);
// => 2

Answer 4

You can find this information out by going up the dom tree using previousElementSibling and incrementing.

var getElementIndex(element) {
    if (!element) {
        return -1;
    }
    var currentElement = element,
        index = 0;

    while(currentElement.previousElementSibling) {
        index++;
        currentElement = currentElement.previousElementSibling;
    }
    return index
}

getElementIndex(document.getElementById('#bar'));

here is the browser support for previousElementSibling:

https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling

Answer 5

索引可以通过这种方式找到

    Array.from(children).findIndex(element => element.id === "bar")