如何將HTML ul-li結構保存到javascript對象中

Question

我有下面的HTML結構，使用ul和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>

該網站允許用戶在此結構下添加更多數據，並且正在使用jquery treeview動態顯示樹結構。 現在，我需要將整個ul-li結構保存到js對象中，以備將來在網站中使用。 我該如何實現？ 如果有幫助，最后一個節點（“ bottom1 and bottom2 here”）具有一個“ last”類。 因為我們可以動態添加數據，所以我們可以確定當用戶單擊“保存”時，到底有多少級別的ul li

Answer 1

您可以使用遞歸函數來保存樹對象；

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

Answer 2

如果您想逐字地復制同一件事，就像在網站上其他位置生成HTML字符串一樣，您可以這樣做嗎？ 然后在您喜歡的地方添加.append()或.prepend() treeview 。

var treeview = $（'＃productTree'）。parent（）。html（）

Answer 3

假設您想要JSON：

function save(){
    var tmp = [];

    $('#productTree li.collapsable').each(function(){
        var $this = $(this),
            $spans = $this.find('span'),
            o = [];

            $spans.each(function(){
               o.push($(this).text())
            })

            tmp.push(o);
    });
    return tmp;
}

您也可以使用map()完成同一件事。

編輯：更新，假設您的文本將生活在span 。 這將創建一個數組數組，每個數組包含每個列表項中span的文本。