我尝试构建多级菜单结构。为此,我创建了一个递归函数,用于使用所有菜单选项制作JSON。但我在jquery中的递归函数中遇到了一个匿名问题。我的递归函数多次添加元素。
以下是我的示例代码,用于描述我的问题 -
HTML -
<div id="div_menu_items">
<ul id="ul_main_container">
<li menu_id="1">Home
<ul>
<li menu_id="3">Admission
<ul>
<li menu_id="8">About
<ul class="sub_menu_container ui-sortable"></ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Jquery / Javascript:
var main_menu_list = [];
$(document).ready(function(){
$('#div_menu_items ul#ul_main_container > li').each(function (i, z) {
var menu_id = $(z).attr('menu_id');
main_menu_list.push({"menu_id": menu_id});
checkSubMenu(z, menu_id);
});
console.log(main_menu_list);
alert(JSON.stringify(main_menu_list));
});
function checkSubMenu(obj, parent_menu_id) {
if ($(obj).children('ul').length > 0) {
if ($(obj).children('ul').find('li').length > 0) {
$(obj).children('ul').find('li').each(function (j, el) {
var menu_id = $(el).attr('menu_id');
main_menu_list.push({"menu_id": menu_id});
checkSubMenu(el, menu_id);
});
}
}
}
对于此JSON [{"menu_id":"1"},{"menu_id":"3"},{"menu_id":"8"},{"menu_id":"8"}]
之后的示例html代码警报。在这里你可以看到结果有多次菜单ID 8。但这应该只是[{"menu_id":"1"},{"menu_id":"3"},{"menu_id":"8"}]
的单一时间。
您还可以查看Jsfiddle - https://jsfiddle.net/jdtgewxx/1/
我无法理解为什么会这样? 任何人都可以帮我改写这个问题吗?
非常感谢你提前...... !!!
UPDATED - 保存子菜单排序的递归
实际上,我的菜单结构有点复杂。我还想在主菜单下保存子菜单。
HTML:
<div id="div_menu_items">
<ul id="ul_main_container">
<li menu_id="1">1st Mainmenu [order 1]
<ul>
<li menu_id="9">1st Submenu [order 1]</li>
<li menu_id="3">2nd Submenu [order 2]
<ul><li menu_id="8">3rd Submenu [order 1]</li></ul>
</li>
</ul>
</li>
<li menu_id="2">2nd Mainmenu [order 2]
<ul>
<li menu_id="4">4th Submenu [order 1]</li>
<li menu_id="5">5th Submenu [order 2]</li>
</ul>
</li>
</ul>
</div>
Jquery的/使用Javascript:
var main_menu_list = [];
$(document).ready(function(){
$('#div_menu_items ul#ul_main_container > li').each(function (i, z) {
var menu_id = $(z).attr('menu_id');
main_menu_list.push({"menu_id": menu_id, "parent_menu_id" : 0, "sorting_order": i + 1});
checkSubMenu(z, menu_id);
});
alert(JSON.stringify(main_menu_list));
});
function checkSubMenu(obj, parent_menu_id) {
if ($(obj).children('ul').length > 0) {
if ($(obj).children('ul').find('li').length > 0) {
$(obj).children('ul').find('li').each(function (j, el) {
var menu_id = $(el).attr('menu_id');
main_menu_list.push({"menu_id": menu_id, "parent_menu_id" : parent_menu_id, "sorting_order": j + 1});
checkSubMenu(el, menu_id);
});
}
}
}
检查更新的小提琴 - https://jsfiddle.net/xqoe9p2m/
答案 0 :(得分:1)
对于示例html,这对我有用:
var main_menu_list = [];
$(document).ready(function(){
$('#div_menu_items ul#ul_main_container').find('li').each(function (i, z) {
var menu_id = $(z).attr('menu_id');
main_menu_list.push({"menu_id": menu_id});
//checkSubMenu(z, menu_id);
});
console.log(main_menu_list);
alert(JSON.stringify(main_menu_list));
});
编辑:是的,有递归方式。问题是:
$(obj).children('ul').find('li').each(function (j, el) {
checkSubMenu函数中的这一行返回所有子节点,并且只能检索直接子节点。
更新的代码:
var main_menu_list = [];
$(document).ready(function(){
$('#div_menu_items ul#ul_main_container > li').each(function (i, z) {
var menu_id = $(z).attr('menu_id');
main_menu_list.push({"menu_id": menu_id});
checkSubMenu(z, menu_id);
});
console.log(main_menu_list);
alert(JSON.stringify(main_menu_list));
});
function checkSubMenu(obj, parent_menu_id) {
if ($(obj).children('ul').length > 0) {
if ($(obj).children('ul').find('li').length > 0) {
$(obj).children('ul').find('> li').each(function (j, el) {
var menu_id = $(el).attr('menu_id');
main_menu_list.push({"menu_id": menu_id});
checkSubMenu(el, menu_id);
});
}
}
}