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>

@SagarChaudhary it returns the sorted array but the menu itself doesn't change — MaximLensky, Aug 18 '19 at 03:03
@SagarChaudhary I don't know if I did the right thing or not. — MaximLensky, Aug 18 '19 at 03:08
It doesn't work that way. You need to iterate or loop ur array to show it — Sagar Chaudhary, Aug 18 '19 at 03:09
First sort the array, then show it in html by iterating over it — Sagar Chaudhary, Aug 18 '19 at 03:12
Check this out https://stackoverflow.com/questions/57541326/how-do-i-sort-the-menu-from-a-smaller-number-to-a-larger-number?noredirect=1#comment101546810_57541326 — Sagar Chaudhary, Aug 18 '19 at 03:15

score 1 · Accepted Answer · answered Aug 18 '19 at 03:25

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>

answered Aug 18 '19 at 03:25

Christian Carrillo

2,433
2
6
12

it's the same copy of my answer – MaximLensky Aug 18 '19 at 03:30
I personally find it a bit confusing why you prefix all variables with `$`. The ["convention"](https://stackoverflow.com/questions/205853/why-would-a-javascript-variable-start-with-a-dollar-sign) is to use `$` variables for jQuery objects. – 3limin4t0r Aug 18 '19 at 03:33
1

@MaximLensky sorry, really i don't tried to copied from u, i made it by my self – Christian Carrillo Aug 18 '19 at 03:36
@3limin4t0r just is a convention to assign variable to DOM elements. – Christian Carrillo Aug 18 '19 at 03:38

score 0 · Answer 2 · answered Aug 18 '19 at 03:16

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>

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

2 Answers2