How can I modify this algorithm which reorders a ?

Question

Background:

I asked this question yesterday:

How to modify the orientation of a

spanning multiple columns?

asking how to

Answer 1

jQuery plugin .transpose()

Exactly what you want it to do. I needed the same thing so I've written a general jQuery plugin that transposes any floated or inline-blocked elements that seem to be in columns but their order goes in rows.

Check out my detailed blog post with an example for transposing US states, and then head over to GitHub where the plugin is maintained and you can get a minified version (915 bytes as of version 1.2) of it as well.

All you need to do is:

$("yourSelector").transpose();

In your case that would be

$("li").transpose();

The good thing is that plugin checks how many columns are there originally (before transposition) and transposes to the same amount of columns afterwards. It doesn't add any additional HTML elements into DOM (like floated column wrappers or similar) it just rearranges existing elements. This is very good when it comes to CSS settings of the page because it doesn't interfere with them in any way shape or form.

And it also distinguishes between different lists of elements (items that are contained within different containers) as if you'd have two UL elements that need transposition. You don't have to call .transpose() on each because plugin will do that for you. You'd still just use the same selector as previously written.