Jquery rekursive Funktion liefert falsches Ergebnis

Question

Ich habe versucht, mehrstufige Menüstruktur zu erstellen. Dazu erstelle ich eine rekursive Funktion, um JSON mit allen Menüoptionen zu erstellen. Aber ich leide an einem anonymen Problem innerhalb der rekursiven Funktion in jQuery. Meine rekursive Funktion hat Elemente mehrfach hinzugefügt.

Hier ist mein Beispielcode, das mein Problem beschreiben -

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

Für diese HTML-Code Benachrichtigung Probe folgenden JSON [{"menu_id":"1"},{"menu_id":"3"},{"menu_id":"8"},{"menu_id":"8"}]. Hier sehen Sie das Ergebnis menu id 8 mehrmals. Aber das sollte nur einmal wie [{"menu_id":"1"},{"menu_id":"3"},{"menu_id":"8"}] sein.

Sie können auch Jsfiddle überprüfen - https://jsfiddle.net/jdtgewxx/1/

Ich bin zu verstehen, nicht in der Lage, warum dies geschehen ist? Kann mir jemand helfen, dieses Problem zu umgehen?

Vielen Dank im Voraus ... !!!

AKTUALISIERT - Rekursion für speichern Untermenü Bestellung

Eigentlich habe ich ein wenig komplex Ebene der Menüstruktur. Ich möchte auch die Untermenü-Bestellung im Hauptmenü speichern.

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

prüfen aktualisiert Geige - https://jsfiddle.net/xqoe9p2m/

Answer 1

Für Probe html für mich funktioniert:

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: Ja, es gibt einen rekursiven Weg. Das Problem ist:

$(obj).children('ul').find('li').each(function (j, el) { 

diese Linie in checkSubMenu Funktion alle Kinder zurückkehrt und soll nur direkte Kinder zurückzuholen.

Aktualisiert Code:

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