生成Jquery的多级菜单列表与UL李

Question

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

阵列到过程： 我有文件夹结构喜欢above.And它被存储在阵列显示目录。见下文

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

目的：我怎样才能让嵌套UL李如下。

<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> 

UPDATE：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 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)) 

DEMO： http://jsfiddle.net/AA6yb/1

修订答案

根据xml已经嵌套的更新信息，问题是如何解析xml而不是平面数组。

以下递归循环遍历xml中的所有目录，即children。通过使用find()你sinply创建以来find()平面数组查找所有后代

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> 

DEMO：http://jsfiddle.net/AA6yb/2/

Answer 2

结构不是创建元素有用，可以根据数组创建一个对象，然后使用这个对象。

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元素添加的传人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/

Answer 3

如果你必须有这样的数据结构，你可以使用这个：

$(function() { 
    var dirs = [ 
     "images", 
     "images/vertical", 
     "images/horizontal", 
     "Jquery", 
     "Jquery/UI", 
     "Jquery/include", 
     "quickfox"]; 

    var rootList = $("<ul id='categorymenu'>").appendTo("body"); 
    var elements = {}; 

    $.each(dirs, function() { 
     var parent = elements[this.substr(0, this.lastIndexOf("/"))]; 
     var list = parent ? parent.next("ul") : rootList; 
     var textMenu= parent ? this.split("/")[1] : this; 
     if (!list.length) { 
      list = $("<ul>").insertAfter(parent); 
     } 
     var item = $("<li>").appendTo(list); 
     $("<a>").text(textMenu).appendTo(item); 
     elements[this] = item; 
    }); 
}); 

这里是一个小提琴：http://jsfiddle.net/K8SZk/3/