如何使用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 (所有元素的父元素)，只是在元素中添加了一个类和span，但是当我试图使第二级__ (2 _)时，当我们都有一个多个列表时，它并不适合我。

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>

​

Answer 2

我想这会对你有帮助

​

function changer(){
  var first = $('#nav li');
  var inserter = '';
  var _counter,prev = 0;
  while(typeof first.html() != "undefined"){
    var len = $(first.html().match(/\_/g)).length;
    if(len>prev) while(len>prev){inserter += '<ul clas="Submenu'+len+'">';prev++;}
    else if(len<prev) while(len<prev){inserter += '</ul>';prev--;}
    inserter += '<li>'+first.html().replace(/\_/g,'')+'</li>'; 
    first = first.next();
  }
  while(prev>0){insert += "</ul>";prev--;}
  $('#nav').empty().append(inserter);
}
$(document).ready(function(){
  changer();
});

<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='#'>Example</a></li>
</ul>

​

Answer 3

您的意思是，当您按下"hasSub1“时，它会展开并显示"subMenu1”(这是隐藏的)吗？

Jquery:
$(document).ready(function(){
$( "a" ).click(function() {
$(this).siblings().toggle();
});
});