如何将 HTML ul-li 结构保存到 javascript 对象中

我有以下使用 ul 和 li 的 html 结构。

<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>

该网站允许用户在此结构下添加更多数据，并使用 jquery treeview 动态显示树结构。 现在我需要将整个 ul-li 结构保存到一个 js 对象中以供将来在网站中使用。我该如何实现这一目标？如果有帮助的话，最后一个节点（“这里是bottom1和bottom2”）有一个“last”类。 因为我们可以动态添加数据，所以当用户单击“保存”时，我们可以确定最后有多少级 ul li

可以使用递归函数来保存树对象；

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'), []));