Поиск индекса DOM node

Я хочу найти индекс данного DOM node. Это похоже на обратное выполнение

document.getElementById('id_of_element').childNodes[K]

Я хочу вместо этого извлечь значение K, учитывая, что у меня уже есть ссылка на дочерний элемент node и родительский node. Как мне это сделать?

Ответ 1

Самый короткий путь, без каких-либо фреймворков, во всех версиях Safari, FireFox, Chrome и IE >= 9:

var i = Array.prototype.indexOf.call(e.childNodes, someChildEl);

Ответ 2

Немного короче, ожидает, что элемент будет в элементе, возвращает k.

for (var k=0,e=elem; e = e.previousSibling; ++k);

После комментария Justin Dearing я рассмотрел свой ответ и добавил следующее:

Или, если вы предпочитаете "пока":

var k=0, e=elem;
while (e = e.previousSibling) { ++k;}

Первоначальный вопрос заключался в том, как найти индекс существующего элемента DOM. Оба моих примера выше в этом ответе предполагают, что elem является элементом DOM и что этот элемент все еще существует в DOM. Они будут терпеть неудачу, если вы дадите им нулевой объект или объект, у которого нет previousSibling. Более безопасный способ будет примерно таким:

var k=-1, e=elem;
while (e) {
    if ( "previousSibling" in e ) {
        e = e.previousSibling;
        k = k + 1;
    } else {
        k= -1;
        break;
    }
}

Если e null или если previousSibling отсутствует в одном из объектов, k равен -1.

Ответ 3

Ответ RoBorg работает... или вы можете попробовать...

var k = 0;
while(elem.previousSibling){
    k++;
    elem = elem.previousSibling;
}
alert('I am at index: ' + k);

Ответ 4

Как и в оригинальном посте, я пытался

найдите индекс данного DOM node

но тот, который я использовал только обработчик кликов, и только в отношении его братьев и сестер. Я не мог закончить работу над этим (из-за необдуманности, несомненно, я попытался подстроить в 'this' для elem, но это не сработало).

Моим решением было использовать jquery и использовать:

var index = $(this).parent().children().index(this);

Он работает без указания типа элемента ie: 'h1' или id и т.д.

Ответ 5

Я думаю, что единственный способ сделать это - перебрать родительские дети, пока вы не найдете себя.

var K = -1;
for (var i = myNode.parent.childNodes.length; i >= 0; i--)
{
    if (myNode.parent.childNodes[i] === myNode)
    {
        K = i;
        break;
    }
}

if (K == -1)
    alert('Not found?!');

Ответ 6

с использованием рамочной структуры, такой как прототип, вы можете использовать это:

$(el).up().childElements().indexOf($(el))