jQuery-按className对DIV排序 [英] jQuery - sort DIVs by className

问题描述

我有一个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位)或第二个命令(它将在第二个位置):解释"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); });
}

I have a list of DIVs, like this :

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

and I want to sort them, using jQuery

Server-side, I can define the wanted order, and include this order in the class names :

catX-4.2

I want to be able to call either the first order (in my example this DIV will be in the 4th position), or the second order (it will be in the 2nd position) : that explains the "4.2"

So if I call OrderDIV(1) I will have this :

1
2
3
4
5

and if I call OrderDIV(2) I will have this :

5
4
3
2
1

(I will need to add more orders, like : catX-4.2.5.6.2)

Thank you VERY MUCH for your help!

解决方案

You changed the requirements mid way ... just like a true client. Updated version with some comments attached. Just to confirm, there are two "configurable" variables at the front.

classPrefix: the "prefix" unique to the class used to determine sort order ('cat' in this case) listElementSelector: the jQuery selector used to obtain the list to sort.

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

这篇关于jQuery-按className对DIV排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！