div position with respect to parent parent div
<p>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.</p>

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

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

<p>My code right now is the following.</p>

<pre><code>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;
            }
        }
    });
</code></pre>

<p>Open to changing the logic</p>
