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

Question

我是一名目标C程序员，并且在我的最新项目中需要一些Javascript。 一个星期前，我从未使用过任何JavaScript。 我已经花了几个小时解决这个特定的问题，无法解决。 我对javascript几乎一无所知，因此，如果我犯了任何基本错误（很可能），我会提前道歉。

基本上我有一个html页面。 页面中有许多自定义跨度标签。 我需要一个函数来告诉我是否某个特定的span标签是段落中的第一件事（而不仅仅是第一个span）。 例如，如果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"

和FALSE为

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

在以下情况下，两个跨度都将返回FALSE，因为这两个都不是该段中的第一件事。

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

我希望附加一些半有效的代码，但是我所做的一切都接近完成。 在我看来，解决此问题的一种方法是找到SPAN相对于段落的范围偏移，并查看其是否为零。 但是我花了数小时阅读文档，无法弄清楚。 我忍不住认为这是因为我对javascript / html中的一般概念和术语缺乏理解。

可能相关的事情：

• 段落可能有也可能没有第一个单词inset。
• 并非所有myClass范围都一定在一个段落中，例如，它们可能在标题中。
• myClass范围可以是斜体或粗体等。
• 这需要是javascript而不是查询。
• 它用于UIWebview中的本机iOS应用程序中。 我认为兼容Safari的东西会起作用。

提前致谢

Answer 1

一个支持浏览器的功能，用于查找所有 span元素，这些元素是其各自父级的第一个孩子：

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

JS小提琴演示 。

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

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

JS小提琴演示 。

假设您只想测试span是否是其父级的第一个childNode，那么实际上要简单得多：

JS小提琴演示 。

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

JS小提琴演示 。

还有一个简单的原型扩展，可以将isFirstChild()方法添加到各个HTMLElement节点：

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

JS小提琴演示 。

Answer 2

获取所有跨度的列表：

spanList = document.getElementsByTagName("span"); // all spans in document

然后函数应如下所示：

function isFirstInParagraph(span)
    {
        var p = span.parentNode;

        if (p.nodeName === "P") // is span contained within 'p'
        {
            if (p.firstChild === span)
                return true;
            else
                return false;
        }
        else
        {
            return false;
        }

    }

Answer 3

如果要在跨度之前忽略纯文本（ 不是标签 ），则可以使用

function isFirstInParagraph(span){
    var parent = span.parentNode;
    return parent.getElementsByTagName('*')[0] === span;
}

演示位于http://jsfiddle.net/gaby/gd2q9/