How can you sort an multiple layer list alphabetically with jquery

Question

I am trying to order a multiple layer list. the problem I ran into was that the sublist merged with mine main list and this is not the intention. the code that I used.

 $('#test').click(function(e) { $(".first ul").each(function() { $(this).find('li').sort(function(a, b) { var aText = $(a).text(), bText = $(b).text(); return aText < bText ? -1 : aText > bText ? 1 : 0; }).appendTo(this); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-2-12" id="menu-mappen"> <ul class="first sortable-folder"> <li class="active"><a id="id1" href="#"><i class="far fa-folder"></i>Afbeeldingen</a></li> <li><a id="id2" href="#"><i class="far fa-folder"></i>Producten</a></li> <li><a id="id3" href="#"><i class="far fa-folder"></i>Homepage</a></li> <li class="has-children"><a id="id4" href="#"><i class="far fa-folder"></i>Bestanden</a> <ul class="first sortable-folder"> <li><a id="id5" href="#"><i class="far fa-folder"></i>Afbeeldingen</a></li> <li><a id="id6" href="#"><i class="far fa-folder"></i>Producten</a></li> <li class="has-children"><a id="id4" href="#"><i class="far fa-folder"></i>Bestanden</a> <ul class=" first sortable-folder"> <li><a id="id5" href="#"><i class="far fa-folder"></i>Afbeeldingen</a></li> <li><a id="id6" href="#"><i class="far fa-folder"></i>Producten</a></li> </ul> </li> </ul> </li> <li><a id="id7" href="#"><i class="far fa-folder"></i>Afbeeldingen</a></li> </ul> <button id="test"></button> </div> 

I hope that someone can help me with this.

Answer 1

Change $(this).find('li') to $(this).children('li')

This way each sort will be applied to sibling li elements.

 $('#test').click(function(e) { $(".first ul").each(function() { $(this).children('li').sort(function(a, b) { var aText = $(a).text(), bText = $(b).text(); return aText < bText ? -1 : aText > bText ? 1 : 0; }).appendTo(this); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-2-12" id="menu-mappen"> <ul class="first sortable-folder"> <li class="active"><a id="id1" href="#"><i class="far fa-folder"></i>Afbeeldingen</a></li> <li><a id="id2" href="#"><i class="far fa-folder"></i>Producten</a></li> <li><a id="id3" href="#"><i class="far fa-folder"></i>Homepage</a></li> <li class="has-children"><a id="id4" href="#"><i class="far fa-folder"></i>Bestanden</a> <ul class="first sortable-folder"> <li><a id="id5" href="#"><i class="far fa-folder"></i>Afbeeldingen</a></li> <li><a id="id6" href="#"><i class="far fa-folder"></i>Producten</a></li> <li class="has-children"><a id="id4" href="#"><i class="far fa-folder"></i>Bestanden</a> <ul class=" first sortable-folder"> <li><a id="id5" href="#"><i class="far fa-folder"></i>Afbeeldingen</a></li> <li><a id="id6" href="#"><i class="far fa-folder"></i>Producten</a></li> </ul> </li> </ul> </li> <li><a id="id7" href="#"><i class="far fa-folder"></i>Afbeeldingen</a></li> </ul> <button id="test"></button> </div>