How do I sort the menu from a smaller number to a larger number?

Question

I made an example of a sandbox with an example inside there is a list with data-attribute and menu items are scattered and I want to sort these items but I did not succeed this, help to understand

https://codepen.io/topicstarter/pen/gOYMedv

 var mass = []; var children = document.querySelector(".menu").children; for(var i = 0; i < children.length; i++){ mass.push(children[i].getAttribute('data-num')); } mass.sort(function (a, b) { return a - b; }); console.log(mass);

 <ul class="menu"> <li data-num="1">a</li> <li data-num="3">c</li> <li data-num="5">e</li> <li data-num="2">b</li> <li data-num="4">d</li> <li data-num="6">f</li> </ul>

Answer 1

You should do it like this:

 // target to menu const $menu = document.querySelector(".menu"); // menu items (ES6 feature: spread operator) const $menuItems = [...$menu.children]; // sort by data-num const $menuItemsSort = $menuItems.sort((a, b) => a.dataset.num - b.dataset.num); // append items sort to menu $menuItemsSort.forEach(element => { $menu.appendChild(element); });

 <ul class="menu"> <li data-num="1">a</li> <li data-num="3">c</li> <li data-num="5">e</li> <li data-num="2">b</li> <li data-num="4">d</li> <li data-num="6">f</li> </ul>

Answer 2

It happened to me, but they helped me.

 [...document.querySelector('.menu').children] .sort((a, b) => a.dataset.num - b.dataset.num) .forEach(n => n.parentNode.appendChild(n));

 <ul class="menu"> <li data-num="1">a</li> <li data-num="3">c</li> <li data-num="5">e</li> <li data-num="2">b</li> <li data-num="4">d</li> <li data-num="6">f</li> </ul>