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

我是一个客观的C程序员，我需要一些Javascript在我的最新项目。一周前，我从未使用过javascript。我在这个问题上花了几个小时，没能解决它。我对javascript几乎一无所知，所以如果我犯了任何基本错误（很可能），我会提前道歉

基本上我有一个html页面。页面中有许多自定义范围标记。我需要一个函数，告诉我是否有任何特定的span标记是段落中的第一件事（不仅仅是第一个span）。e、 g.如果html如下所示：

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

我需要一个函数，对于

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

对我来说是假的

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>

敏捷的棕色狐狸跳过懒惰的狗

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

可能相关的事项：

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

---

提前感谢

获取所有跨度的列表，如下所示：

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;
        }

    }

那么函数应该是这样的：

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;
        }

    }

---

在支持浏览器中，用于查找作为其各自父元素的第一个子元素的所有

span

元素的函数：

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

用于测试给定

span

元素是否为其父元素的第一个子元素的函数：

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

考虑到您只想测试

span

是否是其父节点的第一个子节点，这实际上要简单得多：

以及一个简单的原型扩展，用于将

isFirstChild（）

方法添加到单个

HTMLElement

节点：

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

---

.

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

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

---

在

处演示获取所有跨度，然后测试其位置是错误的方法。只需检查段落的第一个子元素是否为span元素，但请注意，如果

和

标记之间存在不可见的空白，则这可能会产生误导。谢谢Alnitak。无论如何，我必须遍历所有的跨距，以获得关于它们的其他信息（我的问题中没有包括这些信息），因此我认为这可能是合适的位置。我尝试了这个方法，但如果跨距是段落中许多跨距中的第一个跨距，我似乎会返回。我想也许我不清楚我想要什么，所以我编辑了这个问题。只有当它是段落中的第一件事，而不仅仅是第一个跨度时，我才需要返回true。无论如何，谢谢。你所说的东西是指第一个标签或第一条文字。如果你有textdog并要求获得该跨度，你认为会是假的吗？我编辑了我的答案。现在，只有当您要求的跨距是段落中的第一个字符时，它才会返回true。您将获取所有跨距，因此一个段落中可能有相同的outerHTML跨距。您的代码将为本段中的两个span返回true

xsomethings herex

。我更喜欢使用第一个子节点并比较对象。现在您缺少if（p.innerHTML.indexOf（span.outerHTML）==0）部分。请注意，您没有使用

allChildren

variable@Gaby：谢谢，这是第一个想法的解决方案，因为使用了更正的代码编辑。谢谢，但不幸的是，我认为我没有清楚地解释我自己，我已经编辑了我的问题。如果span是段落中的第一个子项，那么它似乎会返回，但是如果它是第一个项，包括任何文本，那么我希望它返回。例如，这里的两个跨距都应该返回false：敏捷的棕色狐狸跳过了懒狗。

出于兴趣，我不得不使用“不支持previousElementChild的浏览器”版本从我的iOS应用程序让它工作。@narco:在这种情况下，最后的代码片段应该可以满足您的需要；尽管我有点惊讶，您担心空白/空文本节点是以前的兄弟节点。