How do I sort items by array?

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.

Does this answer your question? [Javascript - sort array based on another array](https://stackoverflow.com/questions/13304543/javascript-sort-array-based-on-another-array) — Nick, Aug 26 '20 at 12:52
The most upvoted (not accepted) answer will do what you want. — Nick, Aug 26 '20 at 12:52
@Nick, thanks, I'll take a look (I don't google well in English) — Samalamadoit, Aug 26 '20 at 12:54

mplungjan · Accepted Answer · 2020-08-26T13:05:48.140

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>

yep, something like that – Samalamadoit Aug 26 '20 at 12:58 — Samalamadoit, Aug 26 '20 at 12:58

tarkh · Answer 2 · 2020-08-26T13:34:29.927

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>

Shorter: `document.querySelectorAll("#sortContainer article")` — mplungjan, Aug 26 '20 at 13:29
Be careful with getElementsByTagName - it is a live collection — mplungjan, Aug 26 '20 at 13:31

How do I sort items by array?

2 Answers2