Массовые чекбоксы с jQuery

Question

Допустим, у меня есть куча <li> в <ul>. Они выложены так:

<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>

Тем не менее, я хочу переместить их все в другом порядке, то есть

1
4
2
8
7
3
etc...

Я хочу переместить несколько из них, и я МОГУ использовать

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

но тогда я должен следить за тем, что размещено после чего, чтобы не ошибиться в их размещении.

Есть ли более простой способ сделать это?

Обновление Я знаю порядок, потому что каждый из этих <li> отсортирован в алфавитном порядке, т.е.

Academia, Admin/Assistant, Career, Full-Time

Однако, эти флажки содержат три различных категории Wordpress. Я хочу привести их в порядок в зависимости от того, к какой категории они относятся. Т.е.

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

Обновление 2 Это конкретный порядок, в котором я хочу их видеть (есть 21 флажок из 1-23, исключая 10 и 20):

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

9,19,22,12

6,17,15

Тогда я хочу спрятаться 3,7,11,13

Мне было интересно, есть ли простой способ переставить их, то есть перебрать и добавить класс возрастающего числа к <li>, а затем установить массив в каком порядке они пошли, а затем изменить их порядок держать внутренний контент в такте!).

Answer 1

Создайте новый ul и переместите туда элементы li. Затем используйте метод replaceWith ^{[ API Ref ]} для замены исходного 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);

Рабочий пример: http://jsfiddle.net/FishBasketGordo/TWkPW/

ОБНОВЛЕНИЕ: Если вам нужно отсортировать элементы li по их классам, просто поместите классы в нужном вам порядке в newOrder и отфильтруйте lis по классу:

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);

Answer 2

Исходя из вашего исходного поста, что-то вроде этого?

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);

Демо: http://jsfiddle.net/mrchief/jqEgM/7/

Обновление: Затем вы можете скрыть все, что хотите, послетот же подход:

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