Mass-move checkboxes with jQuery

Lets say I have a bunch of <li>'s in a <ul>. They are laid out like this:

<li class="gchoice_7_1">...</li>
<li class="gchoice_7_2">...</li>
<li class="gchoice_7_3">...</li>
<li class="gchoice_7_4">...</li>
<li class="gchoice_7_5">...</li>
<li class="gchoice_7_6">...</li>
<li class="gchoice_7_7">...</li>
<li class="gchoice_7_8">...</li>
<li class="gchoice_7_9">...</li>
<li class="gchoice_7_10">...</li>

However, I want to move them all into a different order, ie

1
4
2
8
7
3
etc...

I want to move a bunch of these around, and I开发者_如何学Python COULD use

$('.gchoice_7_4').insertAfter($('.gchoice_7_1'));

but then I have to keep track of what's placed after what so I don't get into incorrectly placing them.

Is there a simpler way to do this?

Update I know the order because each of these <li>s are sorted in alphabetical order, i.e.

Academia, Admin/Assistant, Career, Full-Time

However, These checkboxes hold three different Wordpress Categories worth of checkboxes. I want to put them in order based on what category parent they are in. i.e.

[Full-Time, Part-Time], [Academia, Admin/Assistant], [Early-Career, Mid-Career]

Update 2 This is the specific order I want them in (there are 21 checkboxes from 1-23, excluding 10 and 20):

1,2,4,5,8,14,16,21,23,18

9,19,22,12

6,17,15

Then I want to hide 3,7,11,13

I was wondering if there was an easy way to rearrange them, i.e. loop through and add a class of an incrementing number to the <li>'s and then set an array of what order they went in and then reorder them (keep the inner content in-tact too!).

Create a new ul and move the li elements to that. Then, use the replaceWith^{[API Ref]} method to replace the original ul.

var lis = $('#origList li'),
    newOrder = [1, 0, 2], // The array indices are the old order.
                          // The array values are the new order.
                          // Modify this array to you needs.
    newList = $('<ul></ul>'),
    ii;

for (ii = 0; ii < newOrder.length; ii += 1) {
    newList.append(lis[newOrder[ii]]);
}

$('#origList').replaceWith(newList);

Working example: http://jsfiddle.net/FishBasketGordo/TWkPW/

UPDATE: If you need to sort the li elements by their classes, just put the classes in the order you want in newOrder and filter lis by the class:

var lis = $('#origList li'),
    newOrder = ['.class2', '.class3', '.class1'],
    newList = $('<ul></ul>'),
    ii;

for (ii = 0; ii < newOrder.length; ii += 1) {
    newList.append(lis.filter(newOrder[ii]));
}

$('#origList').replaceWith(newList);

Based on your original post, something like this?

var newOrder = [4, 3, 5, 6, 7, 8, 9, 10, 2];
var newUl = $('<ul>');
$.each(newOrder, function(key, value) {
    newUl.append($('#old').children('.gchoice_7_' + value).detach());
});
$('#old').remove();
$('#cont').append(newUl);

Demo: http://jsfiddle.net/mrchief/jqEgM/7/

Update: You can then hide whatever li's you want following the same approach:

var hideOrder = [3, 7, 11, 13];
$.each(hideOrder, function(key) {
    newUl.children('.gchoice_7_' + key).hide();
});