Sort Divs every X amount of seconds with JQUERY

Question

I have 5 divs, each having count down timers. The following numbers would obviously be be divided by <br/>'s , but for the sake of the example I am trying to be as clear as possible :-)

Example before sort

4.39
3.45
2.11
3.56
1.11

Example after sort

4.39
3.56
3.45
2.11
1.11

And each countdown counts to 0 obviously. I had in mind, that when a timer reaches 0, that div is sorted automatically sorted and put down in the last position, and then starts again.

I was looking at Jquery's website, and the ones I found are drag related, meaning you have to click on the DIV, and move it yourself. I would like to achieve that animation automatically, by a method that sorts out DIVS according to the timer.

Anyone have a code snippet, one which I didn't find already, that I might find handy? :-)

All help is greatly appreciated!! Thanks!!

Answer 1

You can sort the DIVs and then append the sorted DIV element one by one to a HTML container (such as another DIV holding all these sub-DIVs).

Answer 2

You can get your list using normal jquery selectors. Put all the elements inside a single ul or something and read then out using vanilla jquery.

For sorting, you can use the sort method available for Javascript arrays.

To move the li items into place, you can use either reposition then with some animation (perhaps using the position function in jquery-ui) or simply replace the contents of the ul with a sort list of li's

Finally, to do this repeatedly, you can use the setInterval function.

It might also be possible to tie in some triggers to the jquery-ui sortable and then just call that from your setInterval expression. I haven't tried this though.

Answer 3

Why so complicated?

1. Iterate over the DIVs or list elements
2. read the text
3. convert them to a double
4. add each value to an array
5. Sort the array
6. Create a string of HTML with jQuery
7. replace the content of the container with the new list