JQuery index() в ваниле javascript

В соответствии с jQuery api дополнительная операция для .get(), которая принимает индекс и возвращает DOM node, .index(), может принимать DOM node и возвращает индекс. Предположим, у нас есть простой неупорядоченный список на странице:

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

.index() вернет позицию первого элемента в наборе согласованных элементов относительно своих братьев и сестер:

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

Возвращаем позицию элемента списка на основе нуля:

Index: 1

Я просто хочу знать, как мы можем сделать то же самое с помощью JavaScript?

Ответы

Ответ 1

Вы можете создать свою собственную функцию:

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;
}

Демонстрация (откройте консоль)

Ответ 2

Я изменил ответ Travis J, чтобы не включать TextNodes и не вывел из него функцию.

Вы можете запустить его в консоли и посмотреть (в stackoverflow).

Классический способ:

function getNodeindex( elm ){ 
    var c = elm.parentNode.children, i = 0;
    for(; i < c.length; i++ )
        if( c[i] == elm ) return i;
}

// try it
var el = document.getElementById("sidebar");
getNodeindex(el);

С ES2015:

function getNodeindex( elm ){ 
    return [...elm.parentNode.children].findIndex(c => c == elm)
    // or
    return [...elm.parentNode.children].indexOf(elm)
}

Я также хочу указать на другой поток по тому же вопросу, который имеет отличный ответ (для людей, ищущих более старую поддержку IE)

Ответ 3

Вы можете найти эту информацию, перейдя по дереву dom, используя предыдущий элементСообщение и увеличение.

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'));

вот поддержка браузера для предыдущего элемента:

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