Question

i have this following html structure usilg ul and li.

<ul class="treeview" id="productTree">
   <li class="collapsable lastCollapsable">
     <div class="hitarea collapsable-hitarea lastCollapsable-hitarea"></div>
     <span id="top1" class="">top1</span>
     <ul>
       <li class="collapsable lastCollapsable">
         <span class="">mod1</span>
         <ul>
           <li class="last">
              <span>bottom1</span>
           </li>
         </ul>
       </li>
     </ul>
   </li>
   <li class="collapsable lastCollapsable">
     <span id="top2" class="">top2</span>
     <ul>
       <li class="collapsable lastCollapsable">
         <span class="">mid2</span>
           <ul>
             <li class="last">
                <span>bottom2</span>
             </li>
           </ul>
        </li>
      </ul>
    </li>
</ul>

the website allows user to add more data under this structure and am using jquery treeview to show the tree structure dynamically.
Now i need to save this whole ul-li structure into a js object for future use in the website. how do i achieve this? the last node(“bottom1 and bottom2 here”) has a class “last” if that helps.
as we can add data dynamically we can be sure how much levels of ul li is there at the end when user clicks “save”

Answer 1

You can use recursive function to save a tree object;

function save(obj_ul, tree){

    var obj_lis = obj_ul.find("li")

    if (obj_lis.length == 0) return;        

    obj_lis.each(function(){
        var $this = $(this);
        if($this.parent("ul").get(0) == obj_ul.get(0))
        {
            tree.push({
                name : $this.find('> span').text(),
                child : save($this.find("ul").first(), [])
            });


        }
    });
    return tree;
}

console.log(save($('#productTree'), []));