Как сделать сортировку ul li через js?

Question

[Andress84]

Доброго времени. Есть сгенерированный список ul/li через php , и мне необходимо поменять местами li .
То-есть li с классом lang-item-5 сделать первым по списку, lang-item-10 вторым, lang-item-2 третьим

Сейчас список выглядит так:

<ul>
   <li class="lang-item-2"></li>
   <li class="lang-item-5"></li>
   <li class="lang-item-10"></li>
</ul>

Comments

[ProjectSoft]

Andress84

Есть сгенерированный список ul/li через php

li с классом lang-item-5 сделать первым по списку, lang-item-10 вторым, lang-item-2 третьим

Почему вы этого не можете сделать на php? Ведь в любом случае у вас есть условие сортировки...

[Михаил Костиков]

ProjectSoft, например может быть что это генерирует плагин который не хочется изменять чтобы потерять обновления.

[ProjectSoft]

Михаил Костиков, и это полностью решаемый вопрос.

Answer 1

[Danny Arty]

А почему бы не сделать это сразу на бэке, вместо того, чтобы тратить ресурсы пользователя?
Ну если вдруг такой "возможности" нет, то можно сделать и на CSS:

ul {
   display: flex;
   flex-direction: column;
}
.lang-item-10 {
   order: 1;
}
.lang-item-2 {
   order: 2;
}

Comments

[Andress84]

Благодарю за решение, работает!

Answer 2

[Stalker_RED]

const order = [5, 10, 2];
const parent = document.querySelector('ul');
const sorted = [];
[...parent.children].forEach(el => {
  sorted[order.indexOf(+el.className.match(/lang-item-(\d+)/)[1])] = el;
});
sorted.forEach(el => parent.appendChild(el));