生成Jquery的多级菜单列表与UL李
问题描述:
...images
......|vertical
......|horizontal
...Jquery
......|UI
......|include
...quickfox
阵列到过程: 我有文件夹结构喜欢above.And它被存储在阵列显示目录。见下文生成Jquery的多级菜单列表与UL李
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
});
}
答
原来的答案
如果你改变你的数据结构多维数组/对象可以使用递归函数来遍历无限嵌套层次如下:
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>
答
结构不是创建元素有用,可以根据数组创建一个对象,然后使用这个对象。
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>';
更新:
我没有注意到的是,预期的标记是无效的,一个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>';
答
如果你必须有这样的数据结构,你可以使用这个:
$(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/
谢谢@charlietfl。 1-如何将var dirs转换为multil dim数组。因为这些条目来自xml。 2 - 如何在此代码中添加缩进以进行美化。 – django 2013-04-06 14:15:21
你解析xml在服务器或JavaScript AJAX请求?如果JavaScript;提供xml样本 – charlietfl 2013-04-06 14:17:52
:看到我的问题updated.I读取文档准备xml。 – django 2013-04-06 14:38:13