如何在javascript中将菜单转换为多维关联数组

Question

这是我在html中的菜单布局

<ul>
   <li>Item A
       <ul>
           <li>Item A1</li>
           <li>Item A2</li>
       </ul>
   </li>
   <li>Item B
       <ul>
           <li>Item B1</li>
           <li>Item B2</li>
           <li>Item B3</li>
       </ul>
   </li>
</ul>

如何将此布局转换为以下多维关联JS数组?

var nav = [
    { "title" : "Item A",
      "submenu" : [ "Item A1", "Item A2" ] },
    { "title" : "Item B",
      "submenu" : [ "Item B1", "Item B2", "Item B3"] }
];

谁来告诉我怎么做

Answer 1

您需要在每个li和li的每个子菜单之后提取子菜单

var finalObj=new Array();
$("ul li:not(ul li ul li)").each(function(){
    var objtime=new Object();

    objtime.title=$(this).clone()   
    .children() 
    .remove() 
    .end() 
    .text().trim();

    var tempArray=new Array();
    $(this).children("ul").children("li").each(function(){
        tempArray.push($(this).text());
    });
    objtime.subtitle=tempArray;
    finalObj.push(objtime);
});

http://jsfiddle.net/e6vq1m4m/2/

Answer 2

如果我没理解错的话，您可能想要这样做。

var menuArray = [],
      subArray;
  $('ul.first > li').each(function(i){
    var firstMenu = $.trim( $(this).find("a:first").text() );
    subArray = [];
    $(this).find('ul > li a').each(function(i){
      var secondMenu = $.trim( $(this).filter("a").text() );
      subArray.push(secondMenu);
    });
    menuArray[firstMenu] = subArray;
  });