提供錯誤結果的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); 
     }); 
    } 
    } 
} 

對於以下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/

我無法理解爲什麼這是發生了什麼？ 任何人都可以幫我解決這個問題嗎？

非常感謝您提前... !!!

更新 - 遞歸保存子菜單訂購

其實，我有菜單結構有點複雜程度。我也想保存主菜單下的子菜單。

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/

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

ED IT：是的遞歸方式。問題是：

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