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的计数）。我该怎么做呢？使用JQuery的index()不起作用，因为它只计算元素而不是文本，在这种情况下会产生1。感谢您抽出时间看这个。

Answer 1

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

Array.prototype.indexOf将在NodeList（span.parentNode.childNodes）上运行，就像它是一个数组一样，并为您提供span元素的索引。

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

Answer 2

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

Answer 3

function getIndex(node) {
    var n = 0;

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

    return n;
}

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