javascript - 在 JavaScript 或 JQuery 中获取文本节点的子索引

Question

我需要弄清楚如何才能在可能混入其他元素的父元素中的文本元素的子编号。这是一个示例：

<p>
    Here is a picture of something:
    <img src="something.png"/>
    Now on to other things, like <span id="highlight">this</span> thing.
</p>

我想获取<span>元素子编号，它应该是3（基于 0 的计数）。我该怎么做呢？使用 JQueryindex()不起作用，因为它只计算元素而不是文本，1在这种情况下会给出 a 。感谢您花时间看这个。

score 2 · Accepted Answer

var span = document.getElementById('highlight'),
    index = Array.prototype.indexOf.call(span.parentNode.childNodes, span);

Array.prototype.indexOf将对 NodeList ( span.parentNode.childNodes) 进行操作，就好像它是一个数组一样，并为您获取span元素的索引。

.indexOf()如果您支持 IE8 及更低版本，则需要一个兼容性补丁。

score 2 · Accepted Answer

jQuery 有一个.contents()获取所有子节点的方法，包括文本节点（和注释节点）。您可以使用它来获取索引 3 处的跨度：

$('p').contents()[3]; // your span!

然后您可以使用.index基于节点引用获取索引：

var pContents = $('p').contents();
var span = pContents[3];  // your span
var spanIndex = pContents.index(span); // 3

score 1 · Accepted Answer

function getIndex(node) {
    var n = 0;

    while (node = node.previousSibling)
        n++;

    return n;
}

var idx = getIndex(document.getElementById("highlight"));

3 回答 3