Question

假设你有：

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

如何使用javascript查找id“paragraph”父节点的索引？我认为你必须使用'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

如果标记的结构保持不变，你可以这样做：

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

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

遵循-1的标准不匹配 -

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

使用javascript的元素的parentNode索引

4 个答案: