1

在这个页面上，我使用 jQuery Isotope 插件来安排艺术家在音乐节的阵容中。我希望艺术家按演出日期排序。我已按照说明向同位素选项对象添加了sortBy属性getSortDate。创建同位素容器的代码（in 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);
});

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

  • 鲍勃（4 月 15 日）=> 1334444400000
  • 鲍勃马利（4 月 20 日）=> 1334876400000
  • 鲍勃·迪伦（4 月 26 日）=> 1335394800000

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

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

然后艺术家以与排序函数返回的值相同的顺序显示。为什么按名称排序有效，但按演出日期排序却无效？

4

1 回答 1

-1

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

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

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

问题看起来是returnwith$.each结束了 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;
}
于 2012-03-20T13:19:47.000 回答