通过多维UL循环生成javascript数组

简而言之，我想将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>

以下是它的输出：

---

任何帮助都将受到感激。我有种感觉，我只需要某种函数，它会不断循环一个li，直到它返回错误的结果，即有任何子ul/li。

实现所需的最佳方法是通过递归：

var list=[]；
$（“#main>ul>li”）。每个（函数（）{
push（buildObject（$（this））；
});
函数buildObject（父级）{
var obj={
brand:parent.find（“>span:first”）.text（），
儿童：[]，
}
find（“>ul>li”）。每个（函数（）{
push（buildObject（$（this））；
});
返回obj；
}
控制台日志（列表）



家

第1页
第2页

第3页

a页
b页
c页

第十页

d页
e页
f页
第g页




第4页



实现所需的最佳方法是通过递归：


var list=[]；
$（“#main>ul>li”）。每个（函数（）{
push（buildObject（$（this））；
});
函数buildObject（父级）{
var obj={
brand:parent.find（“>span:first”）.text（），
儿童：[]，
}
find（“>ul>li”）。每个（函数（）{
push（buildObject（$（this））；
});
返回obj；
}
控制台日志（列表）



家

第1页
第2页

第3页

a页
b页
c页

第十页

d页
e页
f页
第g页




第4页



请添加标记的预期输出。这是我的问题，UL大小和嵌套深度可以是任何东西。输出数组需要动态以匹配UL的嵌套格式。请为标记添加预期的输出。这是我的问题UL大小和嵌套深度可以是任何内容。输出数组需要动态匹配UL的嵌套格式。这就是我一直在想的！工作起来很有魅力！谢谢你！这就是我一直在想的！工作起来很有魅力！谢谢你！
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);