Question

我有一个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)，我会有这个：

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

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

非常感谢你的帮助！

Answer 1

jQuery抽象Array.prototype.sort()方法，因此您可以在包装集上使用它：

var OrderDIV = function(asc) {
    $('div#list').children().detach().sort(function(a,b) {
        return asc ? (+a.textContent) - (+b.textContent) : (+b.textContent) - (+a.textContent);
    }).appendTo(document.body);
}

OrderDIV(0);

演示：http://jsfiddle.et/Ls2kd/9/

为简单起见，我按其内容订购了<div>个节点。如果您需要使用ID，它应该不是问题。只需访问a.id并删除比较所需的部分（例如regex）。

另外需要提及的是，InternetExplorer不知道.textContent，因此它应该是a.textContent || a.text。

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

Answer 3

jQuery.fn.sortElements = (function(){

    var sort = [].sort;

    return function(comparator, getSortable) {

        getSortable = getSortable || function(){return this;};

        var placements = this.map(function(){

            var sortElement = getSortable.call(this),
                parentNode = sortElement.parentNode,

                // Since the element itself will change position, we have
                // to have some way of storing its original position in
                // the DOM. The easiest way is to have a 'flag' node:
                nextSibling = parentNode.insertBefore(
                    document.createTextNode(''),
                    sortElement.nextSibling
                );

            return function() {

                if (parentNode === this) {
                    throw new Error(
                        "You can't sort elements if any one is a descendant of another."
                    );
                }

                // Insert before flag:
                parentNode.insertBefore(this, nextSibling);
                // Remove flag:
                parentNode.removeChild(nextSibling);

            };

        });

        return sort.call(this, comparator).each(function(i){
            placements[i].call(getSortable.call(this));
        });

    };

})();

根据您的需要使用此排序条件：

function sortCriteria(k) {
    var regex = /\b\d+/g;
    return function(a, b){
        return parseInt(a.id.match(regex)[k]) > parseInt(b.id.match(regex)[k]) ? 1 : -1;
    }
}

$("#list >").sortElements(sortCriteria(0));

jQuery - 按className排序DIV

3 个答案: