Javascript:如何判断跨度是否是段落中的第一件事？

Question

我是一名客观的 C 程序员，我的最新项目需要一些 Javascript。一周前，我从未使用过任何 JavaScript。我在这个特定问题上花了几个小时，但无法弄清楚。我对 javascript 几乎一无所知，所以如果我犯了任何基本错误(很可能)，我提前道歉。

基本上我有一个 html 页面。页面中有许多自定义跨度标记。我需要一个函数来告诉我任何特定的跨度标记是否是段落中的第一件事(而不仅仅是第一个跨度)。例如如果 html 看起来像这样:

<p><span class="myClass">The</span> quick brown fox jumps over the lazy <span class="myClass">dog.</span></p>

然后我用

var spanList = Document.getElementsByClassName("myClass");

我需要一个为

返回 TRUE 的函数

isFirstInParagraph(spanList[0]);  //ie. the word "The"

和假的

isFirstInParagraph(spanList[1]);  // ie. the word "dog."

在下面的例子中，两个 span 都将返回 FALSE，因为它们都不是段落中的第一件事。

<p>The <span class="myClass">quick</span> brown fox jumps over the lazy <span class="myClass">dog.</span></p>

我很想附上一些半工作代码，但我所做的一切都不够接近。在我看来，解决这个问题的一种方法是找到 SPAN 相对于段落的范围偏移量，并查看它是否为零。但是我花了几个小时阅读文档，却无法弄明白。我不禁认为这是因为我对javascript/html中的一般概念和术语缺乏理解。

可能相关的事情:

• 段落可以插入也可以不插入第一个单词。
• 并非所有 myClass 跨度都必须在段落中，例如，它们可以在标题中。
• myClass 跨度可以是斜体或粗体等。
• 这需要是 javascript 而不是查询。
• 它用于 UIWebview 中的原生 iOS 应用程序内部。我假设某些与 Safari 兼容的东西会起作用。

提前致谢

Answer 1

一个函数，在支持浏览器的过程中，找到 所有 span 元素，它们是各自父元素的第一个子元素:

function allFirstChildSpans () {
    return document.querySelectorAll('span:first-child');
}

JS Fiddle demo .

测试给定 span 元素是否是其父元素的第一个子元素的函数:

function isFirstChild(elem) {
    return null === elem.previousSibling;
}

JS Fiddle demo .

鉴于您只想测试 span 是否是其父节点的第一个子节点，这实际上要简单得多:

JS Fiddle demo .

function isFirstChild(elem) {
    return elem.firstChild === elem;
}

JS Fiddle demo .

还有一个简单的原型(prototype)扩展，用于将 isFirstChild() 方法添加到各个 HTMLElement 节点:

HTMLElement.prototype.isFirstChild = function () {
    return this.parentNode.firstChild === this;
};

JS Fiddle demo .