How to sort out elements by their value in data- attribute using JS

Question

I need to sort out the elements that are already displayed in ascending order so that they just rearrange. I need to sort them out by the values in their data-val attributes.

<div id="a" class="item" data-val="6">Item a</div>
<div id="b" class="item" data-val="8">Item b</div>
<div id="c" class="item" data-val="2">Item c</div>
<div id="d" class="item" data-val="5">Item d</div>

<br />
<button onclick="sortOut()">Sort Out</button>

I made an example here: http://jsfiddle.net/quatzael/uKnpa/

I dont know how to do that. I kind of started but it is probably wrong.

I need the function to firstly find out what elements have class called "item" and then those with this class sort out by the value of their data-val attribute.

It has to work in all browsers so the solution should probably involve .appendChild()

Tnx for any help..

You can check my answer to a similar question here: https://stackoverflow.com/questions/71378596/how-to-reorder-a-html-list-with-jquery-after-a-button-click/71378855#71378855 — Valeriu Ciuca, Mar 07 '22 at 22:58

score 3 · Accepted Answer · answered Jan 02 '13 at 23:48

3

You need to append them to the DOM in the newly sorted order.

Here's what I added to your code to do this:

divs.sort(function(a, b) {
    return a.dataset.val.localeCompare(b.dataset.val);
});

var br = document.getElementsByTagName("br")[0];

divs.forEach(function(el) {
    document.body.insertBefore(el, br);
});

http://jsfiddle.net/RZ2K4/

The appendChild() method could be used instead of .insertBefore() if your sorted items were in a container with nothing else.

To support older browsers, you would use .getAttribute("data-val") instead of .dataset.val.

And if you want a numeric sorting, you shouldn't use .localeCompare in the .sort() function.

answered Jan 02 '13 at 23:48

the system

9,244
40
46

In that case, use `return +a.dataset.val - +b.dataset.val;` – the system Jan 03 '13 at 00:07
I amended it and it is still not working.. [http://jsfiddle.net/quatzael/RZ2K4/2/](http://jsfiddle.net/quatzael/RZ2K4/2/) – Totallama Jan 03 '13 at 00:14
@user1850012: Working here, in FF and Chrome. Order is correct both using `localeComapre` and `+a.dataset.val`. – Jan 03 '13 at 00:21
Now its working!!! Thanks a lot!! [http://jsfiddle.net/RZ2K4/3/](http://jsfiddle.net/RZ2K4/3/) – Totallama Jan 03 '13 at 00:22

score 0 · Answer 2 · answered Sep 08 '20 at 16:28

you can add flex property for the wrapper and use order to order them. or you can reappend elements to their parent

Demo

const items = Array.from(document.querySelectorAll("li"));
const btn = document.querySelector("button");
const orderBy = Array(5).fill().map((x, i) => i + 1); // [1..5]

btn.addEventListener("click", clickHander);
function clickHander() {
  orderBy.forEach(i => {
    const item = items.find(x => x.getAttribute("data-order") === `${i}`);
    item.style.order = i;
    // OR: item.parentElement.appendChild(item);
  });
}

ul {
  display: flex;
  flex-direction: column;
}

<ul>
  <li data-order="4">order 4</li>
  <li data-order="3">order 3</li>
  <li data-order="1">order 1</li>
  <li data-order="5">order 5</li>
  <li data-order="2">order 2</li>
</ul>
<button>sort</button>

How to sort out elements by their value in data- attribute using JS

2 Answers2

Linked

Related