Индекс parentNode элемента с JavaScript

Question

Предположим, у вас есть:

<div><p>Some text</p><p>Some text</p></div>
<div><p id='paragraph'>Some text</p></div>

Как вы можете использовать javascript, чтобы найти индекс родительского узла идентификатора "параграфа"? Я думаю, что вы должны пройти через, с 'docment.getElementsByTagName (' div '), но я застрял после этого. Спасибо за любой совет.

Answer 1

Полагаю, вы хотите включить в индекс только элементы.

var node = document.getElementById('paragraph').parentNode,
    i = 0;

while( node = node.previousSibling ) {
    if( node.nodeType === 1 ) {
        i++;
    }
}

alert(i);

http://jsfiddle.net/dJd6g/

Answer 2

Чтобы следовать стандарту -1, не соответствует -

function indexOf(element) {
    var index = -1;
    while (element) {
        element = element.previousSibling;
        if (element.nodeType === 1) {
            index++;
        }
    }
    return index;
}

Answer 3

Я слегка проверил это, и оно должно работать на большинстве браузеров (не уверен насчет IE):

var parentIndex = function (id)
{
    var elm = document.getElementById(id);
    var par = elm.parentNode;
    var sib = par.parentNode.childNodes;

    for (var i = 0; i < sib.length; i++)
    {
        if (par == sib[i])
        {
            return i;
        }
    }
}

Answer 4

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

var parents = document.getElementsByTagName('div');
for(var i=0, length = parents.length, found = false; i < length && !found; i++){
  var parent = parents[i];
  if(parent.querySelector('#paragraph')){//or search for child with that id if IE < 8
    alert('index is '+i);
    found = true;
  }
}