Question

I’m trying to sort some DIVS in different ways and I’m quite lost. I’ve been trying some stuff but I don’t see how to get it to work.

I have a set of different divs with the same class, different ids, rels and data-attribute inside a container.

<div id="container">
    <div class="sortable" id="div541" rel="1234" data-rel="Name One">
        [some inside html including a table and divs]
    </div>
    <div class="sortable" id="div354" rel="4321" data-rel="Name Two">
        [some inside html including a table and divs]
    </div>
    <div class="sortable" id="div763" rel="112233" data-rel="Name Three">
        [some inside html including a table and divs]
    </div>
</div>

Then I have a <select> element in which the user select the sort type. Options are by numeric value “stored” in the rel attribute (ascending and descending) and by name “stored” in the data-rel attribute (ascending and descending as well).

First I thought of a jQuery plug-in like Quicksand but it clones the elements changing its ID and I have several elements inside each sortable div which I need to keep their ID to interact with them from outside the container. I searched other plug-ins but they all did some sorting but in a different way and I decided doing this myself.

So I did some googling and stackoverflowing and found that I can sort the divs by doing something like this:

 var ids = ['#div541', '#div354', '#541' ...];
 var cont = $('#resultados');
 $.each(ids, function(i, v) {
     cont.append($(v));
 });

But I have to sort the IDs array before doing the actual sorting and that’s where I’m lost.
Before I go on, is this the best way of achieving the sorting? Will the container.append part modify any ID or duplicate and div?

If it’s okay, can you please help me do it?

I would first do a $('.sortable).each() in wich I make a 3 “column” array. So then I sort the rel or the data-rel attribute ASC or DESC and once the array is sorted I use it to append() the divs back into the container. Is this okay? I hate using arrays specially in JavaScript, so could you please give me a hand to make a function to sort it and then get the list of IDs back in order?

Thanks a lot!

Answer 1

An interesting method to sort would be to create an array of crafted strings that contain the sorted attribute value, a sperarator and the element’s ID.

In your example data the string array should look like:

['Name One#div541', 'Name Two#div354', 'Name Three#div763', ...]

or if you want to sort by the numeric value:

['0001234#div541', '0004321#div354', '0112233#div763', ...]

Note that in that case you should pad the number strings with zeros so the sort by string will be correct.

After that you can simply use the javascript .sort() method on the array. After the array is sorted you can take the IDs by parsing out the data before the delimiter.

If you want the sorting to be in descending order, just use .reverse() after sorting.

Edit

You can convert the crafted array to your desired IDs array like this:

var idsArray = $.map( craftedArray, function(val, i) {
  return val.substring(val.indexOf('#'));
});