内部オブジェクト配列を持つオブジェクト配列から要素を追加する

Question

良い一日私のコードに何が問題なのか尋ねたいと思います。ここに状況があります。私はこのようなオブジェクトがあることを考える：html要素へ

var nav = [ 
    {name:"home", subNav: []}, 
    {name:"shop", 
    subNav: [ 
     {name:"inner1", subNav: []}, 
     {name:"inner2", 
     subNav: [ 
      {name:"inner3", subNav: []}, 
      {name:"inner4", subNav: []} 
     ]} 
    ]}, 
    {name:"about", subNav: []}, 
    {name:"contact", subNav: []}, 
]; 

追加各オブジェクトの名前をが、そのsubnavは長さマップを持っている場合には、その後、あまりになどなど、それを追加します。私が今持っているものは、このようなものです。

$('.nav').html(''); 
 
var navs = ""; 
 

 
var nav = [ 
 
    {name:"home", subNav: []}, 
 
    {name:"shop", 
 
    subNav: [ 
 
\t {name:"inner1", subNav: []}, 
 
\t {name:"inner2", 
 
     subNav: [ 
 
      {name:"inner3", subNav: []}, 
 
      {name:"inner4", subNav: []} 
 
     ]} 
 
    ]}, 
 
    {name:"about", subNav: []}, 
 
    {name:"contact", subNav: []}, 
 
]; 
 

 
nav.forEach(function(n) { 
 
    if (n.subNav.length > 0) { 
 

 
    navs = '<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">' + n.name + '<span class="caret"></span></a>'; 
 
    navs += '<ul class="dropdown-menu">'; 
 
    //map subnav of first parent 
 
    n.subNav.map(function(i) { 
 
     navs += '<li><a href="/' + i.name + '">' + i.name + '</a></li>'; 
 
    }); 
 
    navs += '</ul>'; 
 
    navs += '</li>'; 
 

 
    //Edit 
 
    //this is where I will use getSubnav(n,ele) 
 

 
    } else { 
 
    navs = '<li class=""><a href="/' + n.name + '">' + n.name + '</a></li>'; 
 
    } 
 

 
    $('.nav').append(navs); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#"> 
 
    WebSiteName 
 
    </a> 
 
    </div> 
 
    <ul class="nav navbar-nav"> 
 
    </ul> 
 
    </div> 
 
</nav>

私はそれはそれの内部配列を持っているのでinner2メニュー、ドロップダウンとその親と同じようにしたいです。 subNavに配列がなくなるまで自身を呼び出すように自身を繰り返す関数を使用しようとしました。この場合は、getSubnav(n,navs) <というif文に挿入されるnavオブジェクトと要素を渡します。

function getSubnav(nav,ele){ 


    ele ='<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">' + nav.name+ '<span class="caret"></span></a>'; 
    ele +='<ul class="dropdown-menu">'; 

    nav.subNav.map(function(i){ 
     ele += '<li><a href="/' + i.name+ '">' + i.name + '</a></li>'; 
     getSubNav(i,ele); 
    }); 
    ele += '</ul>'; 
    ele += '</li>'; 

} 

Answer 1

レベル2のナビゲーションが表示されるようにするには、this CodePenのCSSフィックスも必要でした。

$(document).ready(function() { 
 

 
    $('.nav').html(''); 
 
    var navs = ""; 
 

 
    var nav = [{ 
 
     name: "home", 
 
     subNav: [] 
 
    }, 
 
    { 
 
     name: "shop", 
 
     subNav: [{ 
 
      name: "inner1", 
 
      subNav: [] 
 
     }, 
 
     { 
 
      name: "inner2", 
 
      subNav: [{ 
 
      name: "inner3", 
 
      subNav: [] 
 
      }, { 
 
      name: "inner4", 
 
      subNav: [{ 
 
       name: "inner4-A", 
 
       subNav: [] 
 
      }] 
 
      }] 
 
     } 
 
     ] 
 
    }, 
 
    { 
 
     name: "about", 
 
     subNav: [] 
 
    }, 
 
    { 
 
     name: "contact", 
 
     subNav: [] 
 
    }, 
 
    ]; 
 

 
    function createNodeHavingSubNode(src, level2) { 
 

 
    var node = $('<li/>', { 
 
     class: (level2 === true) ? 'dropdown-submenu' : 'dropdown' 
 
    }); 
 

 
    var anchorTag = $('<a/>', { 
 
     class: 'dropdown-toggle', 
 
     'data-toggle': 'dropdown', 
 
     text: src.name, 
 
     href: '#' 
 
    }) 
 

 
    if (!level2) { 
 
     anchorTag.append('<span class="caret"></span>'); 
 
    } 
 

 
    node.append(anchorTag); 
 

 
    return node; 
 
    } 
 

 
    function createSubNavNode(src) { 
 
    var li = $('<li/>'); 
 
    var anchor = $('<a/>', { 
 
     href: '/' + src.name, 
 
     text: src.name 
 
    }); 
 

 
    li.append(anchor); 
 

 
    return li; 
 
    } 
 

 
    function createSubNodes(data) { 
 

 
    var element = $('<ul/>', { 
 
     class: 'dropdown-menu' 
 
    }); 
 

 
    $.each(data.subNav, function() { 
 

 
     var d = this; 
 
     if (typeof d.subNav !== 'undefined' && d.subNav.length > 0) { 
 
     element.append(createNodeHavingSubNode(d, true).append(createSubNodes(d))); 
 
     } else { 
 
     element.append(createSubNavNode(d)) 
 
     } 
 

 
    }); 
 

 
    return element; 
 
    } 
 

 
    var ul = $('<ul/>').addClass('nav').addClass('navbar-nav'); 
 
    $.each(nav, function(n) { 
 

 
    var node = this; 
 

 
    if (typeof node.subNav !== 'undefined' && node.subNav.length > 0) { 
 

 
     ul.append(createNodeHavingSubNode(node).append(createSubNodes(node))); 
 
    } else { 
 
     ul.append(createSubNavNode(node)); 
 
    } 
 
    }); 
 
    $('.nav').append(ul); 
 

 

 
});

.dropdown-submenu { 
 
    position: relative; 
 
} 
 

 
.dropdown-submenu>.dropdown-menu { 
 
    top: 0; 
 
    left: 100%; 
 
    margin-top: -6px; 
 
    margin-left: -1px; 
 
    -webkit-border-radius: 0 6px 6px 6px; 
 
    -moz-border-radius: 0 6px 6px; 
 
    border-radius: 0 6px 6px 6px; 
 
} 
 

 
.dropdown-submenu:hover>.dropdown-menu { 
 
    display: block; 
 
} 
 

 
.dropdown-submenu>a:after { 
 
    display: block; 
 
    content: " "; 
 
    float: right; 
 
    width: 0; 
 
    height: 0; 
 
    border-color: transparent; 
 
    border-style: solid; 
 
    border-width: 5px 0 5px 5px; 
 
    border-left-color: #ccc; 
 
    margin-top: 5px; 
 
    margin-right: -10px; 
 
} 
 

 
.dropdown-submenu:hover>a:after { 
 
    border-left-color: #fff; 
 
} 
 

 
.dropdown-submenu.pull-left { 
 
    float: none; 
 
} 
 

 
.dropdown-submenu.pull-left>.dropdown-menu { 
 
    left: -100%; 
 
    margin-left: 10px; 
 
    -webkit-border-radius: 6px 0 6px 6px; 
 
    -moz-border-radius: 6px 0 6px 6px; 
 
    border-radius: 6px 0 6px 6px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#"> 
 
    WebSiteName 
 
    </a> 
 
    </div> 
 
    <ul class="nav navbar-nav"> 
 
    </ul> 
 
    </div> 
 
</nav>