jquery - 使用 ul li 生成 Jquery 多级菜单列表

Question

...images
......|vertical
......|horizontal
...Jquery
......|UI
......|include
...quickfox

要处理的数组:我有像上面一样的文件夹结构。它存储在数组目录中。见下文

var dirs = [ 
        "images",
        "images/vertical",
        "images/horizontal",
        "Jquery",
        "Jquery/UI",
        "Jquery/include",
        "quickfox"
        ];

目标:如何制作如下所示的嵌套 ul li。

<ul id="categorymenu">
    <li>images </li>
    <ul>
        <li>vertical</li>
        <li>horizontal</li>
    </ul>
    <li>Jquery</li>
    <ul>
        <li>UI</li>
        <li>include</li>
    </ul>
    <li>quickfox</li>
</ul>

更新:XML 结构

<directory name="images">
   <file path="BBB.gif" width="500" height="282">BBB.gif</file>
   <file path="AAA.jpg" width="964" height="525">AAA.jpg</file>
   <directory name="images/vertical">
      <file path="CCC.jpg" width="964" height="525">CCC.jpg</file>
   </directory>
   <directory name="images/horizontal">
      <file path="DDD.jpg" width="964" height="525">DDD.jpg</file>      
   </directory>
</directory>

这是我从 xml 制作数组的地方..

$(document).ready(function () {
    //------ READ XML -----------
    $.ajax({
        type: "GET",
        url: "___deck.xml",
        dataType: "xml",
        success: function (data) {
            my_xml = data;
            xmlDirParser(my_xml);
        }
    });
    //------ Get Files on List Change  -----------
    $("#dirlist").change(function () {
        var folder = $(this).find('option:selected').text();
        xmlFileParser(folder, my_xml);
    });
});

function xmlDirParser(my_xml) {
    $(my_xml).find('directory').each(function () {
        var dirname = $(this).attr('name');
        // $('#dirlist').append('<option value="1">'+dirname+'</option>');
        //This is where I get dirs array
    });
}

Answer 1

数组的结构对于创建元素没有用处，您可以基于数组创建一个对象并使用该对象。

var o = {}; 

// Creating an object based on the array elements
$.each(dirs, function (_, value) {
    if (value.indexOf('/') === -1) {
        o[value] = [];
    } else {
        var arr = value.split('/');
        o[arr[0]].push(arr[1]);
    }
});

// Creating elements

var html = '<ul id="categorymenu">';
for (key in o) {
    html += '<li>' + key + '</li>';
    if (o[key].length) {
        html += '<ul><li>' + o[key].join('</li><li>') + '</li></ul>';
    }
}
html += '</ul>';

http://jsfiddle.net/5DuDp/

更新:

我没有注意到预期的标记无效，ul 元素应该只包含 li 子元素，您应该添加后代 ul code> 元素到 li 元素:

for (key in o) {
    html += '<li>' + key ;
    if (o[key].length) {
        html += '<ul><li>' + o[key].join('</li><li>') + '</li></ul>';
    }
    html += '</li>';
}
html += '</ul>';

http://jsfiddle.net/642pr/