JQuery loop through nested ordered list and getting index value for each element

Question

<ol id="author_list"> <li id="author_8"><div class="author">Author 1</div> <ol> <li class="affiliation_7"><div class="affiliation">School1</div> </li> <li class="affiliation_8"><div class="affiliation">School2</div> </li> </ol> </li> <li id="author_10"><div class="author">Author 3</div> <ol> <li class="affiliation_7"><div class="affiliation">School1</div> </li> </ol> </li> <li id="author_9"><div class="author">Author 2</div> <ol> <li class="affiliation_8"><div class="affiliation">School2</div> </li> </ol> </li> </ol> 

Which looks like this:

I want to be able to scroll through this list and save the exact position of the list in json format so that later I can play the list in the same order.

I'm not quite sure what json should look like, but this is what I came up with. Not sure if this is the best way to store data.

 { "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", }, } 

My code is bye

 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); }) 

UPDATE

To clarify, 0,0 , 0,1 refer to the values ​​of the index School1 and School2 respectively, under Author1 , etc.

Answer 1

You do not need index values ​​for schools to reconstruct the list, since you have the relative positions of the schools captured in the JSON structure.

Here is some jQuery code that will build JSON freely based on the Imdad schema:

 var authors = []; $('#author_list > li').each(function(){ var author = {}; author.id = $(this).attr('id').substring(7); author.name = $(this).find('div.author').text(); author.schools = []; $(this).find('ol li').each(function(){ var school = {}; school.sid = $(this).attr('class').substring(12); school.name = $(this).find('div.affiliation').text(); author.schools.push(school); }); authors.push(author); }); var authorsJson = JSON.stringify(authors); console.log(authorsJson); 

The formatted results are as follows:

 [ { "id":"8", "name":"Author 1", "schools":[ {"sid":"7","name":"School1"}, {"sid":"8","name":"School2"} ] }, { "id":"10", "name":"Author 3", "schools":[ {"sid":"7","name":"School1"} ] }, { "id":"9", "name":"Author 2", "schools":[ {"sid":"8","name":"School2"} ] } ] 

Answer 2

 var result = []; function getList(element) { $.each($(element).children('li'), function() { var target = $(this), index = target.index(this) + 1, data = $(target).find('div.author').text(), eachObj = {}; eachObj.author = data; if(target.has('ol')) { var aff = {}; $.each($('ol li', target), function() { aff[this.className] = $(this).find('div.affiliation').text(); }); } eachObj.affiliation = aff; result.push(eachObj) }); return result; } getList($('ol#author_list')); 

Demo

Answer 3

Simple The way you show it is a way to save. And the separation of identification files makes it more flexible.

 [ { "author": { "id":8, "name":"Author 3"}, "schools":[ {"affilication":7, "school":"School 1"}, {"affilication":8, "school":"School 2"} ] }, { "author": { "id":10, "name":"Author 3"}, "schools":[ {"affilication":7, "school":"School 1"} ] }, { "author": { "id":9, "name":"Author 2"}, "schools":[ {"affilication":8, "school":"School 2"} ] } ]