Jquery Isotope - 排序 ASC DESC - 奇怪的行为

Question

我正在使用同位素在主容器中按名称、日期或类别、降序或升序过滤和排序元素。

我需要将第一个元素保留在左上角，使其不受排序的影响。除了按升序/降序排序时，我已经成功地完成了这项工作。第一个元素已排序，在进行了许多不同的排序选择后，页面上会出现间隙。当我查看差距所在的代码时，它的第一个元素的代码在页面上的各个不同位置重复，具体取决于进行了多少排序选择。

如何让第一个元素表现出来？下面是我的代码。

            //isotope set up
            var $container = $('#container'),
                 filters = {};
                 $container.isotope({
                itemSelector: '.element',
                masonry: {
                    columnWidth: 260
                },
                getSortData: {
                    category: function($elem) {
                        if ($elem.is('.first_static')) {
                            return -1;
                        }
                        return $elem.attr('data-category');
                    },
                    date: function($elem) {
                        if ($elem.is('.first_static')) {
                            return -1;
                        }
                        return $elem.attr('data-expiry');
                    },
                    name: function($elem) {
                        if ($elem.is('.first_static')) {
                            return -1;
                        }
                        return $elem.find('.name').text();
                    },
                    first: function($elem) {
                        // sort by first_static first, then by original order
                        return ($elem.hasClass('first_static') ? -500 : 0) + $elem.index();
                    }
                },
                sortBy: 'first'
            });

                //sort page elements
                $('.sort a').click(function(e) {
                    var $this = $(this);
                    if ($this.hasClass('selected')) {
                        return false;
                    }
                    var $sortSet = $this.parents('.sort-set');
                    $sortSet.find('.selected').removeClass('selected');
                    $this.addClass('selected');
                    var sorts = {},
                            key = $sortSet.attr('data-option-key'),
                            value = $this.attr('data-option-value');

                    value = value === 'false' ? false : value;
                    sorts[ key ] = value;


            $container.isotope(sorts).isotope('reloadItems');

            return false;
        });

我正在开发一个 JSFiddle (http://jsfiddle.net/AbUgj/30/) 来展示我想要做什么。无论过滤或排序如何，左上角都应始终有一个蓝色框。

HTML

<h3>Sorting</h3><br />
                            <div class="option-combo sort">
                                <ul data-filter-group="sort" class="sort sort-set clearfix" data-option-key="sortBy">
                                    <li><a href="#" data-option-value="name">Name</a></li>
                                    <li><a href="#" data-option-value="category">Category</a></li>
                                    <li><a href="#" data-option-value="date">Expiry Date</a></li>

                                </ul>
                            </div>
                            <div class="option-combo sort">
                                <ul data-filter-group="sort" class="sort sort-set clearfix" data-option-key="sortAscending">
                                    <li><a href="#" data-option-value="true" id="sortByCatAsc">Ascending</a></li>
                                    <li><a href="#" data-option-value="false" id="sortByCatDesc">Descending</a></li>
                                </ul>
                        </div>

Answer 1

根据升序/降序模式创建不同的排序类别，如下所示：

...
name_asc: function($elem) {
    if ($elem.is('.first_static')) return "aaaa";
    return $elem.find('.name').text();
},
name_desc: function($elem) {
    if ($elem.is('.first_static')) return "zzzz";
    return $elem.find('.name').text();
},
...

要排序，不需要调用reloadItems：

$('#sortByNameAsc').click()(function() {
    $("#container")isotope({sortBy : 'name_asc', sortAscending : true});
});

$('#sortByNameDesc').click()(function() {
    $("#container").isotope({sortBy : 'name_desc', sortAscending : false});
});

或者使用更通用的方法：

<div class="option-combo sort">
    <ul class="sort sort-set clearfix sortKey">
        <li><a href="#" data-option-value="name" class="selected">Name</a></li>
        <li><a href="#" data-option-value="category">Category</a></li>
        <li><a href="#" data-option-value="date">Expiry Date</a></li>
    </ul>
</div>
<div class="option-combo sort">
    <ul class="sort sort-set clearfix sortOrder">
        <li><a href="#" data-option-value="asc" class="selected">Ascending</a></li>
        <li><a href="#" data-option-value="desc">Descending</a></li>
    </ul>
</div>

还有脚本：

$('.sort a').click(function(e) {
    var $this = $(this);

    // Turn 'selected' class on/off
    if ($this.hasClass('selected')) return false;
    $this.parents('.sort-set').find('.selected').removeClass('selected');
    $this.addClass('selected');

    var key = $('.sortKey a.selected').attr('data-option-value');
    var order = $('.sortOrder a.selected').attr('data-option-value');

    var valBy = key + '_' + order; // For instance name_asc
    var valAscending = (order == "asc"); // true for 'asc', false otherwise

    $("#container").isotope({sortBy : valBy, sortAscending : valAscending});

    return false;
});