Рекурсивная функция 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"}]. здесь вы можете увидеть, что результат имеет идентификатор меню 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 ЭТО: Да, есть рекурсивный путь. Проблема заключается в том:

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