使用 Javascript/Jquery 遍历无序列表答案

【问题标题】：Traversing unordered lists using Javascript/Jquery使用 Javascript/Jquery 遍历无序列表
【发布时间】：2010-07-01 13:32:49
【问题描述】：

假设我有一个无序的嵌套列表：

<ul>
   <li>Item a1</li>
   <li>Item a2</li>
   <li>Item a3</li>
       <ul>
           <li>Item b1</li>
           <li>Item b2</li>
           <li>Item b3</li>
            <ul>
               <li>Item c1</li>
               <li>Item c2</li>
               <li>Item c3</li>             
            </ul>
           <li>Item b4</li>
       </ul>
  <li>Item a4</li>
</ul>

我需要遍历它并将其保存在一个二维数组中（最终我只是想将它转换为 JSON 实体）我被允许同时使用 Jquery 和/或 Javascript。我应该如何进行？

谢谢

【问题讨论】：

查看该列表，您看起来至少拥有一个三维数据结构（三个嵌套列表）。您能否阐明您希望输出数组的外观？此外，我认为您不能将
谢谢你，克里斯，我需要一个 JSON 实体作为我的输出。此外，我也可以使用两个嵌套列表。谢谢

标签： javascript jquery list traversal

【解决方案1】：

我不确定你想要生成的数据结构是什么样的，但这（它使用了一些 jQuery）：

$(function() {

    var result = {};

    function createNewLevel(parent,items) {
        var length = items.length;
        for(var i = 0; i < length; i++) {
            if(items[i].tagName == 'UL') {
                parent['ul' + i] = {};
                createNewLevel(parent['ul' + i],$(items[i]).children().get());
            } else {
                parent['li' + i] = $(items[i]).text();
            }
        }
    }

    createNewLevel(result, $('ul:first').get());

    console.log(result);

});

... 会产生这种结构

{
    ul0: {
        li0: "Item a1",
        li1: "Item a2",
        li2: "Item a3",
        li4: "Item a4",
        ul3: {
            li0: "Item b1",
            li1: "Item b2",
            li2: "Item b3",
            li4: "Item b4",
            ul3: {
                li0: "Item c1",
                li1: "Item c2",
                li2: "Item c3"
            }
        }
    }
}

如果需要，可以很容易地对其进行调整以更改结果结构的细节。

请注意，这是一个 javascript 对象。如果你真的需要一个 JSON 对象，那么你只需要使用 var jsonResult = JSON.stringify( result ); 转换它

【讨论】：

当人们将答案标记为正确答案但不赞成时，我觉得很奇怪。

【解决方案2】：

function traversing(ul)
{
     for(var index=0;index<ul.childNodes.length;index++){
          if(ul.childNodes[index].childNodes.length>0){
              traversing(ul.childNodes[index]);
          }
          //perform other operation
     }
}

【讨论】：

@Chris - 哦，对不起，你说的太对了！关于 ul 嵌套的一个愚蠢错误（现在将对其进行编辑）。关于我的输出，我需要它像： { name:item a1 children:[], name:item a2 children:[], name:item a3 children:[{ name:item b1 children:[], name :item b2 children:[], name:item b3 children:[{ name:item c1 children:[] }], }] }
宁可：{ {{name:item a1 children:[]}, {name:item a2 children:[]}, {name:item a3 children:[ {name:item b1 children:[] }, {name:item b2 children:[]}, {name:item b3 children:[ {name:item c1 children:[]} ]}, ]} }
@Galambalazs 是的，是的......就是这样（抱歉代码难以辨认）你有任何代码来格式化我的输出吗？

【解决方案3】：

用 JQuery 试试：

$.each($("li"), function(index, value) { 
  alert(value); 
});

【讨论】：