Question

I have the following html structure.
Please read “abcd” and “efgh” in the ids below as a random string that I generate and append it to give a unique id.

<div id="MainCanvas">
    <div id="canvas-1">
        <div id="MainDiv-abcd">
            <div id="Manvas-abcd">
            </div>
            <div id="Textdiv-abcd">
            </div>  
        </div>
        <div id="MainDiv-efgh">
            <div id="Manvas-efgh">
            </div>
            <div id="Textdiv-efgh">
            </div>  
        </div>
        ...there are more of the main Divs.
    </div>
    <div id="canvas-2">
    ....same structure as above.
    </div>    
</div>

My end goal is to iterate through all the spans and get some information regarding the spans.

My code right now is the following.

var counter = 1;
$('[id^="MainDiv-"]').each(function(i) {
        var spanId = this.id.replace("MainDiv-", "TextDiv-");
        if ($("#" + spanId).length) {
            if ($("#" + spanId).text().trim().length) {
                //here I get the canvas number which is a page in the application
                myPages[counter] = $(this).parent().attr("id").split("-")[1];
                //this is where I need to get the left and top position of the span
                //relative to the canvas
                counter = counter + 1;
            }
        }
    });

Open to changing the logic

Answer 1

You could get the left and top offset of the parent and then subtract the left and top offset of the child you wish to get the position of.

Something like this:

var parent = $("#canvas"),
    child = $("#myspan"),
    parentTop = parent.offset().top,
    parentLeft = parent.offset().left,
    childTop = parent.offset().top,
    childLeft = parent.offset().left,
    childPosTop = parentTop - childTop,
    childPosLeft = parentLeft - childLeft;

childPosTop should contain the child’s top offset relative to canvas and childPosLeft should contain its left offset relative to canvas.