如何使用带有对象的 jQuery 和 Javascript 数组创建任意数量的子列表?
How to create any number of sublists using jQuery and Javascript array with objects?
我有一个简单的 html
元素代码,包括 <div>, <ul>, <li>, <img>, <and> and <spawn>
并通过使用 css 我创建了一个菜单,悬停时显示子列表。
因此,由于 html
代码变得太大,我决定使用 jQuery
和 javascript array with objects inside
动态创建菜单,但我的代码出了点问题,只有当我有 1 个子菜单时才有效.但是当我尝试将子菜单放入其他子菜单时,浏览器上什么也没有出现
每个 <li>
如果只有 1 个 <div>
里面没有子菜单,如果有第二个 <div>
这意味着有具有相同循环的子菜单
我当前的 html 代码如下所示:
<nav class="navigation">
<ul>
<li>
<div>
<img src="files/img/nav/aaa.png"/>
<span>Item 1</span>
</div>
<div>
<ul>
<li>
<div>
<img src="files/img/nav/aaa.png"/>
<span>Sub-item 1</span>
</div>
</li>
</ul>
</div>
</li>
<li>
<div>
<img src="files/img/nav/aaa.png"/>
<span>Item 2</span>
</div>
</li>
</ul>
</nav>
我尝试使用以下 jQuery 代码和这样的数组生成我想要的项目,但我失败了:
var menuData = [
{
"image": "files/img/nav/aaa.png",
"text": "Item 1",
"subMenu": [
{
"image": "files/img/nav/aaa.png",
"text": "Sub-item 1",
"subMenu": [
{
"image": "files/img/nav/aaa.png",
"text": "Sub-item 1.1",
"subMenu": []
}
]
}
]
},
{
"image": "files/img/nav/aaa.png",
"text": "Item 2",
"subMenu": []
}
];
$(document).ready(function(){
function createSubMenu(arrayData){
var elementsArray = [];
var $ul = $('<ul/>');
$.each(arrayData, function(index, value){
var $li = $('<li/>');
var $div = $('<div/>');
var $img = $('<img/>', {'src': arrayData[index].image } );
var $span = $('<span/>', {'text': arrayData[index].text});
$div.append($img, $span);
$li.append($div);
if(arrayData[index].subMenu.length){
$div2 = $('<div/>');
$subUl = createSubMenu(arrayData[index].subMenu);
$div2.append($subUl);
$li.append($div2);
}
elementsArray.push($li);
});
$.each(elementsArray, function(index, value){
$ul.append(value);
});
return $ul;
}
$ul = createSubMenu(menuData);
$('.navigation').append($ul);
});
我应该如何更改我的代码以适用于任意数量的下层子列表???
这是一个带有 1 个子列表的有效 jsfiddle 代码:https://jsfiddle.net/za6bj2vs/
问题是你对以下两个变量使用了全局变量:
$div2 = $('<div/>');
$subUl = createSubMenu(arrayData[index].subMenu);
因此它们在递归和回溯时被覆盖。这会产生不良结果;事实上,它让 $div2.append($subUl);
做了一些灾难性的事情:因为 $div2
同时被递归调用改变了,这实际上试图附加一个作为 $div2
的父元素的元素,所以jQuery ...放弃。
只需使用 var
就可以了:
var $div2 = $('<div/>');
var $subUl = createSubMenu(arrayData[index].subMenu);
我有一个简单的 html
元素代码,包括 <div>, <ul>, <li>, <img>, <and> and <spawn>
并通过使用 css 我创建了一个菜单,悬停时显示子列表。
因此,由于 html
代码变得太大,我决定使用 jQuery
和 javascript array with objects inside
动态创建菜单,但我的代码出了点问题,只有当我有 1 个子菜单时才有效.但是当我尝试将子菜单放入其他子菜单时,浏览器上什么也没有出现
每个 <li>
如果只有 1 个 <div>
里面没有子菜单,如果有第二个 <div>
这意味着有具有相同循环的子菜单
我当前的 html 代码如下所示:
<nav class="navigation">
<ul>
<li>
<div>
<img src="files/img/nav/aaa.png"/>
<span>Item 1</span>
</div>
<div>
<ul>
<li>
<div>
<img src="files/img/nav/aaa.png"/>
<span>Sub-item 1</span>
</div>
</li>
</ul>
</div>
</li>
<li>
<div>
<img src="files/img/nav/aaa.png"/>
<span>Item 2</span>
</div>
</li>
</ul>
</nav>
我尝试使用以下 jQuery 代码和这样的数组生成我想要的项目,但我失败了:
var menuData = [
{
"image": "files/img/nav/aaa.png",
"text": "Item 1",
"subMenu": [
{
"image": "files/img/nav/aaa.png",
"text": "Sub-item 1",
"subMenu": [
{
"image": "files/img/nav/aaa.png",
"text": "Sub-item 1.1",
"subMenu": []
}
]
}
]
},
{
"image": "files/img/nav/aaa.png",
"text": "Item 2",
"subMenu": []
}
];
$(document).ready(function(){
function createSubMenu(arrayData){
var elementsArray = [];
var $ul = $('<ul/>');
$.each(arrayData, function(index, value){
var $li = $('<li/>');
var $div = $('<div/>');
var $img = $('<img/>', {'src': arrayData[index].image } );
var $span = $('<span/>', {'text': arrayData[index].text});
$div.append($img, $span);
$li.append($div);
if(arrayData[index].subMenu.length){
$div2 = $('<div/>');
$subUl = createSubMenu(arrayData[index].subMenu);
$div2.append($subUl);
$li.append($div2);
}
elementsArray.push($li);
});
$.each(elementsArray, function(index, value){
$ul.append(value);
});
return $ul;
}
$ul = createSubMenu(menuData);
$('.navigation').append($ul);
});
我应该如何更改我的代码以适用于任意数量的下层子列表???
这是一个带有 1 个子列表的有效 jsfiddle 代码:https://jsfiddle.net/za6bj2vs/
问题是你对以下两个变量使用了全局变量:
$div2 = $('<div/>');
$subUl = createSubMenu(arrayData[index].subMenu);
因此它们在递归和回溯时被覆盖。这会产生不良结果;事实上,它让 $div2.append($subUl);
做了一些灾难性的事情:因为 $div2
同时被递归调用改变了,这实际上试图附加一个作为 $div2
的父元素的元素,所以jQuery ...放弃。
只需使用 var
就可以了:
var $div2 = $('<div/>');
var $subUl = createSubMenu(arrayData[index].subMenu);