Как отсортировать DOM-элементы в зависимости от текстового содержимого их дочерних элементов?

Question

[Frank_Sidebottom]

Нужно реализовать сортировку элементов DOM в зависимости от содержимого дочернего элемента. Вот на примере фидла. Элемент "р" имеет число. Нужно, чтобы в зависимости от этого числа дивы с классом color* перемещались по DOM в порядке убывания или возрастания. Написал я, например, в теге "p" число 1 и этот цвет должен встать на первое место в DOM и так далее.

https://jsfiddle.net/kjpoycdk/2/

Answer 1

[0xD34F]

const $wrapper = $('.wrapper');
$wrapper
  .children()
  .sort((a, b) => $('p', a).text() - $('p', b).text())
  .appendTo($wrapper);

или

const wrapper = document.querySelector('.wrapper');
wrapper.append(...Array
  .from(wrapper.children, n => [ n, +n.querySelector('p').innerText ])
  .sort((a, b) => a[1] - b[1])
  .map(n => n[0])
);

Comments

[Frank_Sidebottom]

гениально. благодарю!