jQuery looping through a nested ordered list and getting the index value of each element
<pre><code>&lt;ol id="author_list"&gt;
    &lt;li id="author_8"&gt;&lt;div class="author"&gt;Author 1&lt;/div&gt;
        &lt;ol&gt;
            &lt;li class="affiliation_7"&gt;&lt;div class="affiliation"&gt;School1&lt;/div&gt;
            &lt;/li&gt;

            &lt;li class="affiliation_8"&gt;&lt;div class="affiliation"&gt;School2&lt;/div&gt;
            &lt;/li&gt;
        &lt;/ol&gt;
    &lt;/li&gt;
    &lt;li id="author_10"&gt;&lt;div class="author"&gt;Author 3&lt;/div&gt;
        &lt;ol&gt;
            &lt;li class="affiliation_7"&gt;&lt;div class="affiliation"&gt;School1&lt;/div&gt;
            &lt;/li&gt;
        &lt;/ol&gt;
    &lt;/li&gt;
    &lt;li id="author_9"&gt;&lt;div class="author"&gt;Author 2&lt;/div&gt;
        &lt;ol&gt;
            &lt;li class="affiliation_8"&gt;&lt;div class="affiliation"&gt;School2&lt;/div&gt; 
            &lt;/li&gt;
        &lt;/ol&gt;
    &lt;/li&gt;
&lt;/ol&gt;
</code></pre>

<p>Which looks like this</p>

<p><img src="http://i.stack.imgur.com/yQ8qk.png" alt="enter image description here"></p>

<p>I want to be able to loop through this list and store the exact position of the list in a json format so that I can reproduce the list in the same order later.</p>

<p>I'm not exactly sure how the json should look like but this is what I came up with. Not sure if this is the best way to store the data as well..</p>

<pre><code>{
    "association1" : {
         "author": "author_8",
         "affiliation": {
             "affiliation_7": "0,0",
             "affiliation_8": "0,1"
         },
    "association2" : {
         "author": "author_10",
         "affiliation": {
             "affiliation_7": "1,0",
         },
    "association3" : {
         "author": "author_9",
         "affiliation": {
             "affiliation_8": "2,0",
         },       
}
</code></pre>

<p>My code so far</p>

<pre><code>var indexList = [];
var level2 = $('#author_list li ol li')

level2.each(function() {
    var topIndex = $(this).index();
    var subIndex = $(this).parent().parent().index();
    indexList.push((topIndex, subIndex));    
    alert(indexList);
})
</code></pre>

<p><strong>UPDATE</strong></p>

<p>Just to clarify, the <code>0,0</code>, <code>0,1</code> refer to the index values of <code>School1</code> and <code>School2</code> respectively under <code>Author1</code> and so forth</p>
