订单未排序的Div'组；使用jQuery按ID或类排序

是否可以使用jQuery按id或类对一组Div进行排序？这是我的密码：

<div id="product_categories">
  <div class="wpsc_categorisation_group" id="categorisation_group_49">
        <a href="http://africa.local/store/african-dolls/">African Dolls</a>
  </div>
  <div class="wpsc_categorisation_group" id="categorisation_group_47">
        <a href="http://africa.local/store/anklets/">Anklets</a>
  </div>
  <div class="wpsc_categorisation_group" id="categorisation_group_5">
        <a href="http://africa.local/store/bracelets/">Bracelets</a>
  </div>
  <div class="wpsc_categorisation_group" id="categorisation_group_11">
        <a href="http://africa.local/store/childrens-jewelry/">Children's Jewelry</a>
  </div>
  <div class="wpsc_categorisation_group" id="categorisation_group_13">
        <a href="http://africa.local/store/clearance/">Clearance</a>
  </div>
  <div class="wpsc_categorisation_group" id="categorisation_group_8">
        <a href="http://africa.local/store/cross-necklaces/">Cross Necklaces</a>
  </div>
</div>

我知道代码有点混乱，但WP电子商务正在生成代码，不允许我按我想要的方式订购。有什么想法吗

---

谢谢。

我草拟了一份草稿。这段代码很可能会被清理很多次，但现在你可以开始了

演示：

---

工作原理：它查看内部DIV元素的ID并对其进行排序。由于您的所有DIV元素都遵循一个

\uu

和一个数字的模式，因此我取下该数字并将其用作索引

我会使用

.sort

这样的东西：

var ids = $(".wpsc_categorisation_group").map(function(){
    return parseInt(this.id.replace('categorisation_group_',''));
}).toArray().sort();

$.each(ids, function(){
    $('#categorisation_group_'+this).prependTo("#product_categories");
});

---

检查我的

您可以使用sortElements插件：

您可以在这里找到JSFIDLE测试用例

function orderDivs()
{
    var divs = [];
    $("#product_categories .wpsc_categorisation_group").each(function() {
        divs.push($(this));
    });
    // sort using a custom compare function
    divs.sort(byID);
    // empty the old contents
    $("#product_categories").empty();
    // put the ordered divs back in the same container
    for (var i=0; i < divs.length; i++) {
        $("#product_categories").append(divs[i]);
    }
}
function byID(a, b)
{
    // extract number from id
    var a_id_num = parseInt($(a).attr("id").split("_")[2], 10);
    var b_id_num = parseInt($(b).attr("id").split("_")[2], 10);
    // compare with the other
    if(a_id_num > b_id_num) {
        return 1;
    } else {
        return 0;
    }
}

$(function() {
    // ready, go!
    orderDivs();
});

函数orderDivs（）
{
var divs=[]；
$（“#产品#类别.wpsc#U分类#组”）。每个（功能（）{
divs.push（$（本））；
});
//使用自定义比较函数进行排序
divs.sort（byID）；
//清空旧的内容
$（“#产品#类别”）.empty（）；
//将订购的div放回同一容器中
对于（变量i=0；ib_id_num）{
返回1；
}否则{
返回0；
}
}
$（函数（）{
//准备好，开始！
orderDivs（）；
});

---

JSFIDLE上的一个工作示例：

尽管已经有一些其他示例，但我也要把它扔掉！这一个使用正则表达式去除数字

var container = $("#product_categories");
var ele = container.children("div.wpsc_categorisation_group");

ele.detach().sort(function (a, b) {
    var a = $(a).attr('id').match(/\d+/);
    var b = $(b).attr('id').match(/\d+/);
    return a-b;
});
container.append(ele);

---

希望有帮助

非常好的简洁代码！不过有一件事，您需要使用自定义数字排序，因为排序不会正确地进行Lynice解决方案，但使用不带基数的parseInt是一个坏习惯@约翰，是的，我注意到。。。我不得不跑，所以没有时间修理；）谢谢，但我检查了代码，它仍然没有按id订购div。哎呀！自定义排序函数中有一些错误。现在修复（编辑了上面的内容）。这里还有一个工作版本，我将使用这个选项，因为它已经是一个工作插件了。谢谢你，卡拉。事实上我撒谎了……我会选择上面的选项。谢谢，伙计。我想我会选择你的选择。事实上……在所有发布的选项中，我认为这一个效果最好。我会尽我所能清理并更新上面的内容。谢谢这应该被标记为可接受的答案，因为如果两个元素具有相同的值，则不会出现问题。

function orderDivs()
{
    var divs = [];
    $("#product_categories .wpsc_categorisation_group").each(function() {
        divs.push($(this));
    });
    // sort using a custom compare function
    divs.sort(byID);
    // empty the old contents
    $("#product_categories").empty();
    // put the ordered divs back in the same container
    for (var i=0; i < divs.length; i++) {
        $("#product_categories").append(divs[i]);
    }
}
function byID(a, b)
{
    // extract number from id
    var a_id_num = parseInt($(a).attr("id").split("_")[2], 10);
    var b_id_num = parseInt($(b).attr("id").split("_")[2], 10);
    // compare with the other
    if(a_id_num > b_id_num) {
        return 1;
    } else {
        return 0;
    }
}

$(function() {
    // ready, go!
    orderDivs();
});

var container = $("#product_categories");
var ele = container.children("div.wpsc_categorisation_group");

ele.detach().sort(function (a, b) {
    var a = $(a).attr('id').match(/\d+/);
    var b = $(b).attr('id').match(/\d+/);
    return a-b;
});
container.append(ele);