如何将HTML ul-li结构保存到javascript对象中 [英] How to save HTML ul-li structure into javascript object

问题描述

 < ul class =treeviewid =productTree > 
< li class =collapsable lastCollapsable> 
< div class =hitarea collapsable-hitarea lastCollapsable-hitarea>< / div> 
< span id =top1class => 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 =top2class => 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 here）有一个类last。
，因为我们可以动态地添加数据，所以我们可以确定当用户点击save时，最终有多少ul ul存在。解决方案 你可以使用递归函数来保存树对象;

  function save（obj_ul，tree）{
 
 var obj_lis = obj_ul.find（li）
 
 if（obj_lis.length == 0）return; 
 $ b $ obj_lis.each（function（）{
 var $ this = $（this）; 
 if（$ this.parent（ul）。get（0）= text（），
 child：$ obj_ul.get（0））
 {
 tree.push（{
 name：$ this.find（'> span' save（$ this.find（ul）。first（），[]）
}）; 
 
 $ b} 
}）; 
返回树; （$（'＃productTree'），[]））; 
  

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"

解决方案

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

这篇关于如何将HTML ul-li结构保存到javascript对象中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！