循環瀏覽多維UL以生成javascript數組

Question

簡而言之，我想將UL列表轉換為javascript / jquery數組。 我的問題是，UL可以是任意長度和深度的嵌套。

這是UL示例：

<div id="main">
  <ul>
    <li>
      <span>HOME</span>
      <ul>
        <li><span>Page 1</span></li>
        <li><span>Page 2</span></li>
        <li>
          <span>Page 3</span>
          <ul>
            <li><span>Page a</span></li>
            <li><span>Page b</span></li>
            <li><span>Page c</span></li>
            <li>
              <span>Page X</span>
              <ul>
                <li><span>Page d</span></li>
                <li><span>Page e</span></li>
                <li><span>Page f</span></li>
                <li><span>Page g</span></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><span>Page 4</span></li>
     </ul>
    </li>
   </ul>
 </div>

我在jquery中有一個基本的each循環，它只經過第一個嵌套。 我需要它來繼續遍歷所有具有子項的li，並生成與嵌套格式匹配的數組：

var arr = [];
    $("#main > ul > li").each(function() {
        var elem = {
            brand: $(this).find(">span:first").text(),
            children: []
        };
        $(this).find(">ul>li").each(function() {
             elem.children.push($(this).find('span:first').text());
        });
        arr.push(elem);
    });
console.log(arr);

它輸出的是：

任何幫助將不勝感激。 我感覺到我只需要某種功能，就可以不斷循環li的功能，直到因為任何孩子ul / li而返回false為止。

Answer 1

實現所需目標的最佳方法是通過遞歸：

 var list = []; $("#main > ul > li").each(function() { list.push(buildObject($(this))); }); function buildObject(parent){ var obj = { brand: parent.find(">span:first").text(), children: [], } parent.find(">ul>li").each(function() { obj.children.push(buildObject($(this))); }); return obj; } console.log(list); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="main"> <ul> <li> <span>HOME</span> <ul> <li><span>Page 1</span></li> <li><span>Page 2</span></li> <li> <span>Page 3</span> <ul> <li><span>Page a</span></li> <li><span>Page b</span></li> <li><span>Page c</span></li> <li> <span>Page X</span> <ul> <li><span>Page d</span></li> <li><span>Page e</span></li> <li><span>Page f</span></li> <li><span>Page g</span></li> </ul> </li> </ul> </li> <li><span>Page 4</span></li> </ul> </li> </ul> </div>