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/