All geek questions in one place

How to create a child list with javascript and jQuery?

Hi everyone, I want to make a short code list.

I want to move (with javascript or jQuery) from this:

<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>

For this:

<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>

The method is that someone makes a list and uses "_" this second list inside the list before or double "__", as an example that I am doing, and also we can make an infinite list like this method just once .

I tried to make the first level of the script. _ This is what I am doing:

<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>

Please note: # LinkList1 is a Div (the parent of all elements) and just adds a class and span to the element, but when I tried to make the second level __(two _), it doesn’t work fine for me paisley, when we all list multiple

+4
3

<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>
Hide result
+2

, ..: D

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>
Hide result
0

Do you mean that when you click, for example, "hasSub1", it expands and shows "subMenu1" (which was hidden earlier)?

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

Source: https://habr.com/ru/post/1626357/

More articles:


All Articles