jQuery – 按className排序DIV

我有一个DIV列表,像这样：

<div id="list">
    <div class="cat1-4.2"><div>4</div></div>
    <div class="cat3-3.3"><div>3</div></div>
    <div class="cat2-5.1"><div>5</div></div>
    <div class="cat3-1.5"><div>1</div></div>
    <div class="cat3-2.4"><div>2</div></div>
</div>

我想用jQuery对它们进行排序

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

CATX-4.2

我想能够调用第一个订单(在我的例子中,这个DIV将在第4个位置),或者第二个订单(它将在第2个位置)：这解释了“4.2”

所以,如果我打电话给OrderDIV(1),我会这样：

1
2
3
4
5

如果我打电话给OrderDIV(2)我会这样：

5
4
3
2
1

(我需要添加更多订单,例如：catX-4.2.5.6.2)

非常感谢您的帮助！

解决方法

你在中途改变了要求……就像真正的客户一样.更新版本附带一些注释.只是为了确认,前面有两个“可配置”变量.

classprefix：用于确定排序顺序的类唯一的“前缀”(在这种情况下为“cat”)
listElementSelector：用于获取要排序的列表的jQuery选择器.

function OrderDIV(position)
{
    var classprefix = 'cat';
    var listElementSelector = '#list';

    // -- Decrement the position to make it 0 based
    position--;

    // -- Parses the "position" section from the given classes,and
    //    then the position at the specific index requested.
    var parsePosition = function(classes,pos) {
        // -- Split the "classes" into an array.
        var classList = classes.split(' ');

        // -- Determine which of the "classes" starts with the prefix we want.
        for( var i in classList )
        {
            if( classList[i].substr(0,classprefix.length) == classprefix )
            {
                // -- Strip out the positions section,and split it.
                var positions = classList[i].split('-')[1].split('.');

                // -- return the one position we want
                return positions[pos];
            }
        }

        // -- In the event that we don't find the class we're looking for ...
        return -1;
    }

    // -- Compares div A to div B,and returns an indicator of the order
    var funcSort = function(a,b) {
        // -- Use "parsePosition" to determine the sortable criteria from the classes.
       var compA = parsePosition($(a).attr('class'),position);
       var compB = parsePosition($(b).attr('class'),position);
       return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
    };

    // -- Select the list element.
    var list = $(listElementSelector);

    // -- Select the list items,and return them as an array.
    var listitems = list.children('div').get();

    // -- Sort the array using the "funcSort".
    listitems.sort(funcSort);

    // -- Go through each of the array entries,and "append" them to the list container
    //   (this moves them to the 'back' of the list)
    $.each(listitems,function(idx,itm) { list.append(itm); });
}