Javascript: How to tell if a span is the first thing in a paragraph?

Question

I am an objective C programmer, and I need some Javascript in my latest project. One week ago I had never worked on any javascript. I have spent a few hours on this particular problem and can't figure it out. I know virtually nothing about javascript, so I apologise in advance if I make any basic errors (very likely).

Basically I have an html page. There are a number of custom span tags in the page. I need a function that tells me if any particular span tag is the first thing (not just the first span) in a paragraph. eg if the html looks like this:

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

And then I use

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

I need a function that would return TRUE for

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

and FALSE for

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

And in the following case, both spans will return FALSE, since neither are the first thing in the paragraph.:

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

I would love to attach some semi working code, but nothing I have done has come close. It seems to me that one way to approach this would be to find range offset of the SPAN relative to the paragraph, and see if it is zero. But I have spent hours reading through documentation and can't figure it out. I can't help but think that it is because my lack of understanding of the general concepts and terms in javascript/html.

Things that might be relevant:

• paragraphs may or may not have the first word inset.
• not all myClass spans are necessarily in a paragraph, they could be in a heading for example.
• the myClass span could be in italics or bold etc..
• this needs to be javascript not query.
• it is for inside a native iOS app, in a UIWebview. I would assume something Safari compatible will work.

thanks in advance

Answer 1

A function, in supporting browsers, to find all span elements that are the first-child of their respective parents:

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

JS Fiddle demo .

A function to test if a given span element is the first-child of its parent:

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

JS Fiddle demo .

Given that you want to only test if the span is the very first childNode of its parent, that's actually far simpler:

JS Fiddle demo .

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

JS Fiddle demo .

And a simple prototype-extension to add the isFirstChild() method to individual HTMLElement nodes:

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

JS Fiddle demo .

Answer 2

Get list of all spans like that:

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

Then function should look like that:

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

If you want to ignore pure text ( not is a tag ) before the span then you can use

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

Demo at http://jsfiddle.net/gaby/gd2q9/