Question

我有一个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>

我希望使用jQuery

对它们进行排序

服务器端，我可以定义所需的订单，并在类名中包含此订单：

排序 - 的 4.2

我希望能够调用第一个订单（在我的例子中，这个DIV将在第4个位置），或者第二个订单（它将在第2个位置）：这解释了“4.2”

所以如果我打电话给OrderDIV(1)，我会有这个：

如果我打电话给OrderDIV(2)，我会有：

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

正如您所看到的，DIV可以有多个类，只有模式SORT-定义用于排序的类

非常感谢你的帮助！

Answer 1

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

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

使用正则表达式从className中提取正确的信息并覆盖数组，使其如下所示：

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++;
    }
}

结果是：

示例： http://jsfiddle.net/TsArJ/10/

sort( $('#list > div'), 3 ); // 1,2,3,4,5

Answer 2

可能是这样的：

$(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();
})

更多信息：http://jsfiddle.net/apvjN/20/

jQuery - 根据提取的类名数来命令DIV

2 个答案: