javascript - Jquery递归函数提供错误结果

Question

我尝试构建多级菜单结构。为此，我创建了一个递归函数，用于使用所有菜单选项制作 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);
      });
    }
  }
}

对于此示例 html 代码提醒，遵循 JSON [{"menu_id":"1"},{"menu_id":"3"},{"menu_id":"8"},{"menu_id": “8”}]。在这里你可以看到菜单 ID 多次为 8 的结果。但这应该只是一次，例如 [{"menu_id":"1"},{"menu_id":"3"},{"menu_id":"8"}]。

您还可以查看 Jsfiddle - https://jsfiddle.net/jdtgewxx/1/

我不明白为什么会发生这种情况？ 谁能帮我解决这个问题？

提前非常感谢...!!!

更新 - 保存子菜单排序的递归

实际上，我的菜单结构有点复杂。我还想在主菜单下保存子菜单排序。

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);
      });
    }
  }
}

检查更新的 fiddle - https://jsfiddle.net/xqoe9p2m/

Answer 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);
      });
    }
  }
}