javascript - 如何使用 javascript 和 jQuery 制作列表子项？

Question

大家好，我想用一个简短的代码制作一个列表

我想从这里移动(使用 javascript 或 jQuery):

<ul id='nav'>
  <li><a href='#'>Home</a></li>
  <li><a href='#'>Sub-menu</a></li>
  <li><a href='#'>_Sub-Menu child 1</a></li>
  <li><a href='#'>_Sub-Menu child 2</a></li>
  <li><a href='#'>_Sub-Menu child 3</a></li>
  <li><a href='#'>__Sub-Menu child 3.1</a></li>
  <li><a href='#'>__Sub-Menu child 3.2</a></li>
  <li><a href='#'>__Sub-Menu child 3.3</a></li>
  <li><a href='#'>Example</a></li>
</ul>

为此:

<ul id='nav'>
  <li><a href='#'>Home</a></li>
  <li class='hasSub1'>
    <a href='#'>Sub-menu</a>
    <ul class='subMenu1'>
     <li><a href='#'>Sub-Menu child 1</a></li>
     <li><a href='#'>Sub-Menu child 2</a></li>
     <li class='hasSub2'>
       <a href='#'>Sub-Menu child 3</a>
       <ul class='subMenu2'>
         <li><a href='#'>Sub-Menu child 3.1</a></li>
         <li><a href='#'>Sub-Menu child 3.2</a></li>
         <li><a href='#'>Sub-Menu child 3.3</a></li>
       </ul>
     </li>
    </ul>
  </li>
  <li><a href='#'>Example</a></li>
</ul>

方法是当有人制作一个列表并使用“_”时，第二个列表位于前列表或“__”的双倍内，就像我制作的示例一样，我们也可以像这种方法一样制作一个无限列表而不是就一次。

我尝试制作脚本的第一层 _这是我做的:

<script>
               $("#LinkList1").each(function() {
               var e = "<ul id='nav'><li><ul id='sub-menu'>";
               $("#LinkList1 li").each(function() {
                   var t = $(this).text(),
                       n = t.substr(0, 1),
                       r = t.substr(1);
                   "_" == n ? (n = $(this).find("a").attr("href"), e += '<li><a href="' + n + '" class="list-name"><span class="lint-span">' + r + "</span></a></li>") : (n = $(this).find("a").attr("href"), e += '</ul></li><li><a href="' + n + '" class="list-name"><span class="lint-span">' + t + "</span></a><ul id='sub-menu'>")
               });
               e += "</ul></li></ul>";
               $(this).html(e);
               $("#LinkList1 ul").each(function() {
                   var e = $(this);
                   if (e.html().replace(/\s|&nbsp;/g, "").length == 0) e.remove()
               });
               $("#LinkList1 li").each(function() {
                   var e = $(this);
                   if (e.html().replace(/\s|&nbsp;/g, "").length == 0) e.remove()
               })
           });$('#sub-menu').parent().addClass('hasSub');
</script>

请注意:#LinkList1 是一个 Div(所有元素的父级)，只是在元素中添加了一个类和跨度，但是当我尝试制作第二级时 __(两个 _)它没有当我们都有多个列表时，'完美地为我工作

Answer 1

我为每个 <a> 创建了一个函数进入您的导航菜单列表。

请尝试以下操作:

$(document).ready(function () {
  var list = $("<ul />");
  $("ul#nav a").each(function(i,e){
    var iter = $($(this).html().match(/\_/g)).length;
var href = $(this).attr("href");
    if(iter>0){
        if(list.find("ul").hasClass("subMenu"+iter)){
          list.find(".subMenu" + iter).append("<li><a href='"+ href +"'>" + $(this).text().substr(iter) + "</a></li>");
        }else{
          list.find("li").last().append("<ul class='subMenu"+iter+"'><li><a href='"+ href +"'>" + $(this).text().substr(iter) + "</a></li></ul>").addClass("hasSub"+iter);
        }
    }else{
        list.append("<li><a href='"+href+"'>" + $(this).text() + "</a></li>");
    }
  })
  $("#nav").empty().append(list);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id='nav' >
  <li><a href='#'>Home</a></li>
  <li><a href='#'>Sub-menu</a></li>
  <li><a href='#'>_Sub-Menu child 1</a></li>
  <li><a href='#'>_Sub-Menu child 2</a></li>
  <li><a href='#'>_Sub-Menu child 3</a></li>
  <li><a href='#'>__Sub-Menu child 3.1</a></li>
  <li><a href='#'>__Sub-Menu child 3.2</a></li>
  <li><a href='#'>__Sub-Menu child 3.3</a></li>
  <li><a href='#'>___Sub-Menu child 3.3.1</a></li>
  <li><a href='#'>Example</a></li>
</ul>