Question

在this page上，我正在使用jQuery Isotope插件在艺术节的阵容中布置艺术家。我希望艺术家按他们的表演日期排序。我已关注the instructions并将sortBy和getSortDate属性添加到Isotope选项对象。创建Isotope容器的代码（在common.js中）是：

var container = $(containerSelector);

var isotopeOptions = {
    itemSelector: itemSelector,
    layoutMode: 'fitRows',
    onLayout: function() {
        this.css('visibility', 'visible');
    },

    getSortData: {
        perfDate: function (element) {

            // parse out the performance date from the css classes
            var classList = element.attr('class').split(/\s+/);
            var dateClassPrefix = 'date-';

            $.each(classList, function(index, cssClassName){

                if (cssClassName.substring(0, dateClassPrefix.length) === dateClassPrefix) {

                    // Should be a date in format 'yyyy-MM-dd'
                    var dateString = cssClassName.substring(dateClassPrefix.length);
                    return SF.parseDate(dateString).getTime();
                }
            });
        }
    },
    sortBy: 'perfDate'
};

container.imagesLoaded(function() {
    container.isotope(isotopeOptions);
});

如您所见，艺术家未按表演日期排序。我已调试到我的排序功能并验证它返回以下值

B.o.B（4月15日）=＆gt; 1334444400000
Bob Marley（4月20日）=＆gt; 1334876400000
Bob Dylan（4月26日）=＆gt; 1335394800000

所以艺术家应该按照上面的顺序显示。奇怪的是，如果我将排序功能替换为按名称按字母顺序对艺术家进行排序的功能，例如

perfDate: function (element) {
    return element.find('.artistTitle a').text();
},

然后艺术家的显示顺序与排序功能返回的值相同。为什么按名称排序有效，但按性能日期排序却没有？

Answer 1

您可以检查以查看为sortData设置的值，如下所示：

$('#headline').data('isotope').$filteredAtoms.each( function( i, item ) {
  console.log( $.data( item, 'isotope-sort-data').perfDate );
});

在您的情况下，这会为所有三个元素返回undefined。

问题似乎是return $.each结束了每个function，但它没有返回日期值。您可以通过在$.each中获取日期并在perfDate函数末尾返回该日期来解决此问题。

perfDate: function (element) {

  // parse out the performance date from the css classes
  var classList = element.attr('class').split(/\s+/);
  var dateClassPrefix = 'date-';

  var date;

  $.each(classList, function(index, cssClassName){

    if (cssClassName.substring(0, dateClassPrefix.length) === dateClassPrefix) {

      // Should be a date in format 'yyyy-MM-dd'
      var dateString = cssClassName.substring(dateClassPrefix.length);
      date = SF.parseDate(dateString).getTime();
    }
  });
  return date;
}

在Isotope容器中排序元素

1 个答案: