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

我需要弄清楚如何才能在父元素中找到文本元素的子元素号，而父元素中可能混合了其他元素。下面是一个例子：

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

这是一张照片：
现在再谈其他事情，比如这件事。

我想得到

元素的子编号，它应该是

3

（基于0的计数）。我该怎么做呢？使用JQuery的

index（）

不起作用，因为它只计算元素而不计算文本，在本例中，这将给出

1

。谢谢你花时间看这个

function getIndex(node) {
    var n = 0;

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

    return n;
}

---

Array.prototype.indexOf

将在节点列表（

span.parentNode.childNodes

）上操作，就像它是一个数组一样，并获取

span

元素的索引

如果您支持IE8及更低版本，则需要为

.indexOf（）

提供一个兼容性补丁。

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

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

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

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

---

Var n=0

然后

n--

将输出负值。@Sheikheera:哦，嗯，是的，不知道我为什么要递减！谢谢。我喜欢这个，因为我可以使用任意节点，包括文本节点。稍后，当我用完全不同的内容替换它时，我将使用索引来选择子索引。为了获取对新替换节点的引用，我使用了

$（parent）.contents（）[childNum]

（假设在进行替换之前存储了

parent

的内容）。万分感谢！为什么要转换为数组？如果你要使用

.call（）

，那么就直接在

.indexOf（）

上使用它。因为节点列表没有indexOf方法？它们也没有

.slice（）

方法。比如：

数组.prototype.indexOf.call（span.parentNode.childNodes，span）

节点列表没有

.indexOf（）

方法，因此，您需要使用

.slice（）

转换为数组，以便使用它。问题是节点列表也没有

.slice（）

方法，所以可以从

Array.prototype

借用它。因此，与其借用

.slice（）

来转换为数组，给你

.indexOf（）

，为什么不直接借用

.indexOf（）

。所有的

Array.prototype

方法都是通用的，可以用于任何类似数组的集合。尽管如此，我仍然非常喜欢这里的两个纯js答案，因为它们的独创性。jQuery有时很无聊！：-）如果我能选择两个公认的答案，你的答案肯定是其中之一。这是一个很好的方法。显然，在非jquery环境中，执行

.index（）

部分需要一个等价物。

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

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