Order elements by a data-index value

Question

I have a container element containing div elements with a data-index value. I want to reorder the elements by the data-index, so they appear as 1, 2 and 3.

<div class="container">
    <div class="col-md-4" data-index="3">Col 3</div>
    <div class="col-md-4" data-index="1">Col 1</div>
    <div class="col-md-4" data-index="2">Col 2</div>
</div>

So how can I sort the elements by the data-index value?

sort in the page it self? How those divs were generated at first hand? — Arup Rakshit, Sep 16 '18 at 14:22
the elements will be deattached and appended as the site resizes — SteinTheRuler, Sep 16 '18 at 14:29

score 3 · Answer 1 · answered Sep 16 '18 at 14:30

3

I am using flexbox to change the order of the divs:

let cols = Array.from(document.querySelectorAll(".container .col-md-4"));
cols.map((col)=>{
  let index = col.dataset.index;
  col.style.order = index;
})

.container{display:flex;flex-direction:column;}

<div class="container">
    <div class="col-md-4" data-index="3">Col 3</div>
    <div class="col-md-4" data-index="1">Col 1</div>
    <div class="col-md-4" data-index="2">Col 2</div>
</div>

answered Sep 16 '18 at 14:30

enxaneta

31,608
5
29
42

1

That's very clever and nothing changes in the DOM – Phil Sep 16 '18 at 14:32
1

`.forEach` makes more sense. OP is probably using a CSS framework (bootstrap) so changing box model might create more problems than it solves. – Salman A Sep 16 '18 at 14:37
1

Nearly 4 years later. This works brilliantly. Solved a multiple flexbox column problem – Damien Keitel Jun 22 '22 at 07:04

score 2 · Answer 2 · answered Sep 16 '18 at 14:39

Use document.querySelector to get all the children then use sort to sort this collection and iterate through this collection to append the element back to the div

function reorder() {
  let orderedString = '';
  [...document.querySelectorAll('.container div')].sort(function(a, b) {
    return a.dataset.index - b.dataset.index

  }).forEach(function(item) {
    document.querySelector('.container').appendChild(item)
  })

}

<div class="container">
  <div class="col-md-4" data-index="3">Col 3</div>
  <div class="col-md-4" data-index="1">Col 1</div>
  <div class="col-md-4" data-index="2">Col 2</div>
</div>
<button onclick="reorder()">Order</button>

Mamun · Answer 3 · 2018-09-16T14:31:33.567

1

You can try with sort(), attr() and appendTo() like the following way:

$('.container div').sort(function(a,b) {
     a = Number($(a).attr('data-index'));
     b = Number($(b).attr('data-index'));
     return a - b;
}).appendTo('.container');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="col-md-4" data-index="3">Col 3</div>
    <div class="col-md-4" data-index="1">Col 1</div>
    <div class="col-md-4" data-index="2">Col 2</div>
</div>

edited Sep 16 '18 at 14:31

answered Sep 16 '18 at 14:24

Mamun

66,969
9
47
59

1

I guess `sort()` should return `a - b` rather than `a > b`; it is -1, 0 or 1 depending on whether a is less than, equal or grater than b. – Damian Czapiewski Sep 16 '18 at 14:30

score 1 · Accepted Answer · answered Sep 16 '18 at 14:29

Use Array.sort function with proper callback:

$(".container div").sort(function(a, b) {
  return $(a).data("index") - $(b).data("index");
}).appendTo(".container");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="col-md-4" data-index="3">Col 3</div>
  <div class="col-md-4" data-index="1">Col 1</div>
  <div class="col-md-4" data-index="2">Col 2</div>
</div>

score 0 · Answer 5 · answered Sep 16 '18 at 14:29

0

Get the divs and sort it with sort() then attach to the parent doc with html()

var divList = $(".col-md-4");
divList.sort(function(a, b){
return $(a).data("data-index")-$(b).data("data-index")
});
$(".container").html(divList);

answered Sep 16 '18 at 14:29

Osama

2,912
1
12
15

Order elements by a data-index value

5 Answers5