Sort unordered list based on data-row and data-col

Question

I have a page with a 'ul' (unordered list) that I insert 'li' elements on the fly. With 2 attributes: data-col and data-row. This two attributes are arbitrary and can be any value. (any Real positive number)

Is there a way to re-order all 'li' elements based on data-row and data-col? It does not have to be visible, I just need the 'ul' element with all its children properly ordered.

Extra info: The reason for this is because I have a back-end code that needs to read this 'ul' element with its children in sequence and then populate a TABLE element. It´s like I´m saving a multi-dimensional array into a 1 dimension array.

Thanks :)

Wouldn't it be easier to sort the data you're sending to the backend, and not the elements themselves ? Maybe you should post some of the code, or at least a few examples of what it would look like ? — adeneo
– adeneo, Commented Apr 23, 2015 at 0:02
Are the rows/columns even ? If you have any code that you're kicking around it would be easier to assist! — zfrisch
– zfrisch, Commented Apr 23, 2015 at 0:02
@adeneo I´m using a grid framework so it´s kinda big code, as I insert new things to the grid, the framework adds a new 'li' to the 'ul' element. But it does not rearrange it, it adds to the bottom of the list. I haven´t thought about reorder it in backend, I just thought it would be easy to reorder it in javascript. I will try it but I´d still like to know how to do it in javascript. — Art
– Art, Commented Apr 23, 2015 at 0:11

Paul Roub · Accepted Answer · 2015-04-23 00:11:32Z

3

You can use jQuery.sort() to sort the list of li elements based on row, then column, and re-append the sorted list to the ul. The appended list replaces the previous unsorted version:

var ul = $('#mylist');

var lis = $('#mylist > li');

lis.sort(

  function(a, b) {
    var ela = $(a);
    var elb = $(b);
    
    var res = +ela.data('row') - elb.data('row');
    
    if (res == 0)   // if rows are the same, sort by column
      res = +ela.data('col') - elb.data('col');
    
    return res;
  }

).appendTo(ul);

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

<ul id="mylist">
  <li data-col="2" data-row="14">14, 2</li>
  <li data-col="2" data-row="1">1, 2</li>
  <li data-col="3" data-row="4">4, 3</li>
  <li data-col="1" data-row="3">3, 1</li>
  <li data-col="1" data-row="4.5">4.5, 1</li>
</ul>

answered Apr 23, 2015 at 0:11

Paul Roub

36.5k27 gold badges88 silver badges95 bronze badges

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

1 Comment

Art Over a year ago

Wow, that was perfect! Thanks Paul!

Collectives™ on Stack Overflow

Sort unordered list based on data-row and data-col

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related