jQuery-根据类名的提取编号对div进行排序

我有一个div列表，如下所示：

<div id="list">
    <div class="classA classB SORT-4.2"><div>4</div></div>
    <div class="classA SORT-3.3"><div>3</div></div>
    <div class="classC classD classE SORT-5.1"><div>5</div></div>
    <div class="classB classC SORT-1.5"><div>1</div></div>
    <div class="classA class B class C SORT-2.4"><div>2</div></div>
</div>

如果我调用

OrderDIV（2）

1
2
3
4
5

5
4
3
2
1

（我需要添加更多订单，如：SORT-4.2.5.6.2）

正如您所看到的，div可以有多个类，只有模式

SORT-

定义了用于排序的类

非常感谢你的帮助

可能是这样的：

$(function(){
    function sortDIV(){
        var divs=$("div[class*=SORT]").clone();
        divs.sort(function(pDiv,fDiv){
            var pNumber=parseInt($(pDiv).attr("class").match(/SORT-(.*)/)[1].replace(".",""));
            var fNumber=parseInt($(fDiv).attr("class").match(/SORT-(.*)/)[1].replace(".",""));
            return pNumber<fNumber;
        })
        var parent=$($("div[class*=SORT]")[0]).parent();
        parent.empty();
        divs.each(function(index,div){
                $(div).appendTo(parent);
        })
    }
    sortDIV();
})

$（函数（）{
函数sortDIV（）{
var divs=$（“div[class*=SORT]”）clone（）；
分区排序（函数（pDiv、fDiv）{
var pNumber=parseInt（$（pDiv）.attr（“class”）.match（/SORT-（.*）/）[1]。替换（“.”，”）；
var fNumber=parseInt（$（fDiv）.attr（“class”）.match（/SORT-（.*）/）[1]。替换（“.”，”）；
返回pNumber可能是这样的：

$(function(){
    function sortDIV(){
        var divs=$("div[class*=SORT]").clone();
        divs.sort(function(pDiv,fDiv){
            var pNumber=parseInt($(pDiv).attr("class").match(/SORT-(.*)/)[1].replace(".",""));
            var fNumber=parseInt($(fDiv).attr("class").match(/SORT-(.*)/)[1].replace(".",""));
            return pNumber<fNumber;
        })
        var parent=$($("div[class*=SORT]")[0]).parent();
        parent.empty();
        divs.each(function(index,div){
                $(div).appendTo(parent);
        })
    }
    sortDIV();
})

$（函数（）{
函数sortDIV（）{
var divs=$（“div[class*=SORT]”）clone（）；
分区排序（函数（pDiv、fDiv）{
var pNumber=parseInt（$（pDiv）.attr（“class”）.match（/SORT-（.*）/）[1]。替换（“.”，”）；
var fNumber=parseInt（$（fDiv）.attr（“class”）.match（/SORT-（.*）/）[1]。替换（“.”，”）；
return pNumber创建一个接受div和订单号（1、2等）的函数

将div从jQuery对象转换为DOM元素数组

使用正则表达式从类名中提取适当的信息并覆盖数组，使其看起来像：

arr[0] = {num:4, el:/* the element */}
arr[1] = {num:2, el:/* the element */}
arr[2] = {num:3, el:/* the element */}

然后按
a.num
和
b.num
排序

最后迭代数组，追加每个元素

function sort( divs, order ) {
    var arr = divs.toArray(),
        len = arr.length,
        parent = divs.parent(),
        i = 0;

    while( i < len ) {
        var num = arr[ i ].className.match(/(?:SORT-([\d.]+))/)[1].split('.');
        arr[ i ] = {num:num[ order - 1 ],el:arr[ i ]};
        i++;
    }
    arr.sort(function(a,b) {
        return a.num - b.num;
    });
    i = 0;
    while( i < len ) {
        parent.append( arr[i].el );
        i++;
    }
}

创建一个接受div和订单号（1、2等）的函数

将div从jQuery对象转换为DOM元素数组

使用正则表达式从类名中提取适当的信息并覆盖数组，使其看起来像：

arr[0] = {num:4, el:/* the element */}
arr[1] = {num:2, el:/* the element */}
arr[2] = {num:3, el:/* the element */}

然后按
a.num
和
b.num
排序

最后迭代数组，追加每个元素

function sort( divs, order ) {
    var arr = divs.toArray(),
        len = arr.length,
        parent = divs.parent(),
        i = 0;

    while( i < len ) {
        var num = arr[ i ].className.match(/(?:SORT-([\d.]+))/)[1].split('.');
        arr[ i ] = {num:num[ order - 1 ],el:arr[ i ]};
        i++;
    }
    arr.sort(function(a,b) {
        return a.num - b.num;
    });
    i = 0;
    while( i < len ) {
        parent.append( arr[i].el );
        i++;
    }
}

似乎很棒！是否可以添加选择是否使用第一个数字排序-4.2或第二个数字排序-4.**2**？并且您的脚本似乎顺序错误，（5个在前，1个在后），是否可以反转结果？似乎很好！是否可以添加选择是否使用第一个数字sort-4.2或第二个数字sort-4.**2**？并且您的脚本似乎顺序错误，（先5个，后1个），有可能逆转结果吗？看起来很完美，我不明白为什么我不能在我的实际项目中测试您的代码（比这里的示例更复杂）也许是原始的DOM选择？你能发布一个原始代码的示例吗？这些div是实际的兄弟姐妹，还是更像是堂兄弟姐妹？这很奇怪，我的原始代码在JSFIDLE上工作，但不是在我的计算机上…我如何启动该函数？是否正确：
@jrm:是的，只要你定义将
sort（）
函数封装在全局名称空间中。换句话说，确保它没有封装在另一个函数中，如jQuery的
.ready（）
。您能发布一段JSFIDLE代码吗？@jrm:Ah-yes。我回到了原来的位置，但从正则表达式中去掉了一些工作。
var num=arr[I]。className.match（/（？：sort-（[\d.]+））/)[1] .split（'.'）；
试试看。似乎很完美，我不明白为什么我不能在我的实际项目中测试你的代码（比这里的示例更复杂）也许是原始的DOM选择？你能发布一个原始代码的示例吗？这些div是实际的兄弟姐妹，还是更像是堂兄弟姐妹？这很奇怪，我的原始代码在JSFIDLE上工作，但不是在我的计算机上…我如何启动该函数？是否正确：
@jrm:是的，只要你定义将
sort（）
函数封装在全局名称空间中。换句话说，确保它没有封装在另一个函数中，如jQuery的
.ready（）
。您能发布一段JSFIDLE代码吗？@jrm:Ah-yes。我回到了原来的位置，但从正则表达式中去掉了一些工作。
var num=arr[I]。className.match（/（？：sort-（[\d.]+））/)[1] .split（'.'）；
试试看。