用ul li生成Jquery多级菜单列表 [英] generate Jquery Multilevel menu list with ul li

问题描述

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

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

Array to process: I have folder structure Like above.And it is stored in array dirs. see below

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

目标:如何按照以下方法制作嵌套的ul.

Objective: How Can I make nested ul li as below.

<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制作数组的地方.

This is where I make array from 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
    });
}

推荐答案

原始答案

如果将数据结构更改为多维数组/对象，则可以使用递归函数遍历无限嵌套级别，如下所示:

If you change your data structure to multi dimensional arrays/objects can use a recursive function to loop through infinite nesting levels as follows:

var dirs = [{
    name: "images",
    subdir: [{
        name: "vertical"
    }, {
        name: "horizontal"
    }]
}, {
    name: "Jquery",
    subdir: [{
        name: "UI", subdir: [{name:'Nested 1',subdir: [{name:'Nested 2',subdir: [{name:'Nested 3'}]}]}]
    }, {
        name: "include"
    }]
}, {
    name: "quickfox"
}];

function createList( array){
    var html='<ul>';
    $.each( array, function(k, item){
        html+='<li>'+item.name;
        if( item.subdir){
            html+=createList(item.subdir);
        }
        html+='</li>';
    });
     html+='</ul>';
    return html;
}


$('body').html( createList( dirs))

演示: http://jsfiddle.net/AA6yb/1

修订后的答案

基于xml已经具有嵌套的更新信息，问题是如何解析xml而不是平面数组.

Based on updated information that xml already has nesting, issue is how to parse xml not flat array.

以下内容以递归方式循环遍历xml中所有 children 的目录.通过使用 find()，您可以创建一个平面数组，因为 find()查找所有后代

Following recursively loops through all directories in xml that are children. By using find() you sinply created a flat array since find() looks for all descendents

function createList($xml) {
    var html = '';

    $xml.children('directory').each(function () {
        var $dir = $(this);
        var name= $dir.attr('name');
        html += '<li class="dir">' + parseName($dir.attr('name'));
        if ($dir.children().length) {
            html += '<ul>';
            $dir.children('file').each(function () {
                html += '<li class="file">' + $(this).attr('path') + '</li>';
            });
            /* recursively loop through children directories of this directory*/
            if( $dir.children('directory').length){
                html+=createList($dir);
            }
            html += '</ul>';
        }
    });
    html += '</li>';
    return html;
}
function parseName( name){
    if( name.indexOf('/')>-1){
        return name.split('/').pop();
    }else{
        return name;
    }
}

$('#directory_list').html(createList($(xmlData)))

HTML

<ul id="directory_list"></ul>

演示: http://jsfiddle.net/AA6yb/2/

这篇关于用ul li生成Jquery多级菜单列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！