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: stackoverflow.com/questions/71378596/… — Valeriu Ciuca
– Valeriu Ciuca, Commented Mar 7, 2022 at 22:58

the system · Accepted Answer · 2013-01-02 23:48:05Z

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 2, 2013 at 23:48

the system

9,35642 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

the system Over a year ago

In that case, use return +a.dataset.val - +b.dataset.val;

Totallama Over a year ago

I amended it and it is still not working.. http://jsfiddle.net/quatzael/RZ2K4/2/

user234932 Over a year ago

@user1850012: Working here, in FF and Chrome. Order is correct both using localeComapre and +a.dataset.val.

Totallama Over a year ago

Now its working!!! Thanks a lot!! http://jsfiddle.net/RZ2K4/3/

Zuhair Taha · Accepted Answer · 2020-09-08 16:28:47Z

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>

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related