Как отсортировать элементы по массиву?

Question

Понимаю, что формулировка вопроса некорректна (если кто-то может написать корректно - прошу). Задача такая, у меня есть 30 элементов на странице и мне надо их сортировать полученным массивом. То есть я получаю массив - let order = [2, 5, 3, 6, 12 ...] и в соответствии с этим порядком должна проходить сортировка, то есть первый элемент - это 2й элемент из HTML, второй элемент это 5й элемент из HTML (в соответствии с данным массивом). Изначальный порядок равен номеру в data-custom-sort.

Таких массивом будет много. И я не понимаю, как это сделать универсально. Может у кого-то есть идеи?

Я понимаю, что сформулировал не очень хорошо, поэтому если есть вопросы - задавайте.

HTML примерно такой:

<a id="sort-best" class="choose-cat">best</a>

<div>
    <article data-custom-sort="1">
        ...
    </article>
    <article data-custom-sort="2">
        ...
    </article>
    <article data-custom-sort="3">
        ...
    </article>
    //и так далее

</div>

Это карточки товаров в каталоге. Мне надо их сортировать

document.querySelector('#sort-best').onclick = sortBest;

    function sortBest() {
        let nav = document.querySelector('#game-items-cart');
        for (let i = 0; i < nav.children.length; i++) {
            for (let j = i; j < nav.children.length; j++) {
                if (+nav.children[i].getAttribute('data-sort') > +nav.children[j].getAttribute('data-sort')) {
                    replaceNode = nav.replaceChild(nav.children[j], nav.children[i]);
                    insertAfter(replaceNode, nav.children[i]);
                }
            }
        }
    }

    function insertAfter(elem, refElem) {
        return refElem.parentNode.insertBefore(elem, refElem.nextSibling);
    }

Этот код я использовал что-бы сделать сортировку через data атрибуты. То есть номер в data атрибуте = порядковому номеру после сортировки.

Answer 1

Встроенной реализации нет. Нужно написать свою. Можете использовать такой код:

const clickCount = [5,2,4,3,1];
const imgUrl = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg']; 

const result = imgUrl 
    .map((item, index) => [clickCount[index], item])
    .sort(([count1], [count2]) => count2 - count1) 
    .map(([, item]) => item);

console.log(result);

Answer 2

Вот Вам пример

let articles = [
  {
    price: 3
  },
  {
    price: 2
  },
  {
    price: 1
  }
]

let nav = document.querySelector('#game-items-cart')

let sortBtn = document.querySelector('#sort-best')

function renderArticles() {
  nav.innerHTML = ''
  articles.forEach(article => {
    let html = `
      <article>${article.price}</article>
    `
    nav.innerHTML += html
  })
}

renderArticles()

sortBtn.addEventListener('click', evt => {
  evt.preventDefault()
  articles.sort((a, b) => a.price - b.price)
  renderArticles()
})

<a href="" id="sort-best" class="choose-cat">best</a>

<div id="game-items-cart">
</div>

БЛОГ НА HUSL

Как отсортировать элементы по массиву?

Ответы (2 шт):