Question

So I’ve got a list of hidden fields:

<ul class="reorderable">
    <li>Foo<input class="hiddenThing" type=hidden name="thing[0]" value=foo /></li>
    <li>Bar<input class="hiddenThing" type=hidden name="thing[1]" value=bar /></li>
    <li>Baz<input class="hiddenThing" type=hidden name="thing[2]" value=baz /></li>
</ul>

Purely informational, I don’t expect this to be related to the answer, but FYI I’m using the JQuery UI “sortable” plugin:

<script type="text/javascript">
$(document).ready(function () {
    $('ul.reorderable').sortable({ update: stuffHappens; });
}
</script>

The thing you need to understand from this is that the sortable plugin allows the user to reorder these elements arbitrarily. Now, what I want to do is implement a revert button.

<button value="Revert" onClick="revertList()" />

I want this to put the elements of the list back in order based on the name of the hidden inputs. I imagine this will require regexes (to extract the number from the brackets in the name. thing[10] should come after thing[9]) and I imagine that JQuery will be handy. But I’m drawing a blank when I try to approach this problem, probably because I’m not familiar with sorting DOM elements nor regexing with JavaScript.

Keeping this naming format is a must.

Answer 1

I’d probably use a standard array sort, then remove all the items and add them back sorted:

$('#reorder').click(function() {
    // get the list items and store references to them,
    // grabbing their names on the way
    var items = [];
    $('ul.reorderable li').each(function() {
        var name = $('input', this).attr('name'),
            // regex is overkill if you're always using the same format
            // this is quick, but a little hacky - parseInt stops
            // at non-numeric characters
            pos = parseInt(name.split("[")[1]);
        items.push({
            item: this, // store a reference to the DOM element
            pos: pos 
        });
    });
    // now sort by name
    items.sort(function(a,b) {
        return a.pos > b.pos ? 1 : -1;
    });
    // delete the items and add them back sorted
    var $ul = $('ul.reorderable');
    $ul.empty();
    // forEach() might be more elegant, but isn't cross-browser yet
    for (var x=0; x<items.length; x++) {
        $ul.append(items[x].item);
    }
});

Working version here: http://jsfiddle.net/nrabinowitz/Ew2EX/3/

This might get slow if you have a large number of items, but it’s much easier than trying to reorder them in-place.

Code updated to compare single- and double-digit numbers (because "2" > "11").