如何按数组对项目进行排序？

Question

I understand that the wording of the question is incorrect (if someone can write it correctly, please). The task is this, I have 30 elements on the page and I need to sort them with the resulting array. That is, I get an array - let order = [2, 5, 3, 6, 12 ...] and sorting should take place in accordance with this order, that is, the first element is the 2nd element from HTML, the second element is the 5th element from HTML (according to the given array). The initial order is equal to the number in data-custom-sort .

There will be many such an array. And I don't understand how to do it universally. Can someone have any ideas?

I have not formulated very well, so if you have questions - ask.

The HTML is something like this:

<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>
    //and etc

</div>

These are product cards in the catalog. I need to sort them

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);
}

I used this code to sort through the data attributes. That is, the number in the data attribute = the ordinal after sorting .

Answer 1

Like this?

 let order = [2, 1, 3]; const container = document.getElementById("container"); document.getElementById("sort-best").addEventListener("click", e => { e.preventDefault() order.forEach(idx => container.appendChild(container.querySelector("[data-custom-sort='" + idx + "']"))) })

 <a id="sort-best" class="choose-cat">best</a> <div id="container"> <article data-custom-sort="1"> One </article> <article data-custom-sort="2"> Two </article> <article data-custom-sort="3"> Three </article> </div>

More generic:

 const sortArticles = (cont, order) => { const container = document.getElementById(cont); order.forEach(idx => container.appendChild(container.querySelector("[data-custom-sort='" + idx + "']"))) }; document.getElementById("sort").addEventListener("click", e => { const tgt = e.target; if (tgt.classList.contains("choose-cat")) { e.preventDefault() sortArticles("container", tgt.dataset.order.split(",")) } })

 <div id="sort"> <a id="sort-best" class="choose-cat" data-order="3,1,2">best</a> | <a id="sort-default" class="choose-cat" data-order="1,2,3">default</a> </div> <div id="container"> <article data-custom-sort="1"> One </article> <article data-custom-sort="2"> Two </article> <article data-custom-sort="3"> Three </article> </div>

Answer 2

Here is another way of doing this

 // Sort reference array const sortRef = [2, 5, 3, 1, 4]; // Get, sort, update function const sortFn = () => { // Apply new order by sorting and replacing sortContainer content const newArray = []; for(let i = 0; i < sortRef.length; i++) newArray.push(document.querySelector("[data-custom-sort='" + sortRef[i] + "']").outerHTML); // Update html document.getElementById("sortContainer").innerHTML = newArray.join(''); } // Add click event document.getElementById("clickMe").addEventListener('click', event => { sortFn(); });

 article { border: 1px solid #ff0000; padding: 3px; width: 100px; }

 <div id="sortContainer"> <article data-custom-sort="1"> 1 </article> <article data-custom-sort="2"> 2 </article> <article data-custom-sort="3"> 3 </article> <article data-custom-sort="4"> 4 </article> <article data-custom-sort="5"> 5 </article> </div> <p></p> <button id="clickMe">Sort html data</button>