使用jQuery批量移动复选框

假设我在一个

中有一堆
。它们的布局如下：

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

我想把这些东西搬来搬去，我可以用

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

但是，我必须跟踪在什么之后放置什么，这样我就不会错误地放置它们

有没有更简单的方法

更新我知道顺序，因为每个
都是按字母顺序排序的，即

Academia, Admin/Assistant, Career, Full-Time

但是，这些复选框包含三种不同的Wordpress类别的复选框。我想根据它们所属的类别对它们进行排序。i、 e

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

更新2这是我想要的具体顺序（1-23中有21个复选框，不包括10和20）：

然后我想隐藏
3,7,11,13

我想知道是否有一种简单的方法来重新排列它们，即循环并向
添加一个递增的数字类，然后设置它们的顺序数组，然后对它们进行重新排序（也要保持内部内容的灵活性！）。
创建一个新的
ul
并将
li
元素移动到该位置。然后，使用
replaceWith
[]方法替换原始
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);

创建一个新的
ul
并将
li
元素移动到该位置。然后，使用
replaceWith
[]方法替换原始
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);

根据你原来的帖子，是这样的吗

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

根据你原来的帖子，是这样的吗

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

你怎么知道新订单是什么？很抱歉，我遗漏了这些信息，以免混淆/误导。我的帖子将被更新，以解释我是如何知道顺序的。复选框“包含三个不同的Wordpress类别”如何？我正在使用gravity表单和gravity表单自定义帖子类型插件。我使用的分类法有层次分类（职业早期、职业中期、职业晚期的孩子的经验），但也有一个与孩子感兴趣的分类，如学术界、行政/助理和其他。所以本质上，我有一个层次分类法，但重力形式所做的一切都是在不考虑层次的情况下抓住它们，并将它们按字母顺序排列。你怎么知道新的顺序是什么？对不起，我遗漏了这些信息，以免混淆/误导。我的帖子将被更新，以解释我是如何知道顺序的。复选框“包含三个不同的Wordpress类别”如何？我正在使用gravity表单和gravity表单自定义帖子类型插件。我使用的分类法有层次分类（职业早期、职业中期、职业晚期的孩子的经验），但也有一个与孩子感兴趣的分类，如学术界、行政/助理和其他。所以本质上，我有一个层次分类法，但重力表单所做的一切都是在不考虑层次的情况下获取它们，并将它们按字母顺序排列。我查看了你的JSFIDLE，但它似乎根本没有对它们进行排序？我将进一步摆弄你的FIDLE（不是双关语），看看我是否能让它工作，因为如果我能根据类名而不是索引中的键来设置排序顺序，那就太理想了。@Josh：很抱歉，我不在的时候错过了你的更新。你的作品里没有分类，所以我的小提琴没有。你还需要它还是@FishBasketGordo的答案足够好？
@FishBasketGordo
就足够了。在我的OP中，我确实声明我希望
的顺序不同，并声明了一个顺序。答案唯一的错误是键是数组中的索引，而不是该索引处的值（因此
newOrder
中的第一项是4，但使用
$时。each（）
键是0）。你是对的。我需要的是
值
而不是
键
。另外，当你更新你的帖子时，我不在，所以我错过了排序部分。我检查了你的JSFIDLE，它似乎根本没有对它们进行排序？我会再摆弄一下你的FIDLE（没有双关语），看看我是否能让它工作，因为如果我能根据类名而不是索引中的键来设置排序顺序，那就太理想了。@Josh：很抱歉，我不在的时候错过了你的更新。你的作品里没有分类，所以我的小提琴没有。你还需要它还是@FishBasketGordo的答案足够好？
@FishBasketGordo
就足够了。在我的OP中，我确实声明我希望
的顺序不同，并声明了一个顺序。答案唯一的错误是键是数组中的索引，而不是该索引处的值（因此
newOrder
中的第一项是4，但使用
$时。each（）
键是0）。你是对的。我需要的是
值
而不是
键
。另外，当你更新你的帖子时，我不在，所以我错过了排序部分。这很有效，但这不意味着我必须解释丢失的第10和第20个索引吗？（索引中的7_1=0，索引中的7_11=9？）别误会，这比使用
insertBefore
和
insertAfter
容易得多，但是有没有一种方法可以让它根据列表项的类别而不是列表项的索引中它们的数量进行追加呢，但这不意味着我必须解释缺失的第10和第20指数吗？（索引中的7_1=0，索引中的7_11=9？）别误会，这比使用
insertBefore
和
insertAfter
容易得多，但是有没有一种方法可以让它根据列表项的类别而不是列表项的索引中的数字进行追加？
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);

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