同位素容器中的排序元素

在this page上，我使用jQuery Isotope插件来排列节日排行榜中的艺术家。我希望艺术家按照他们的表演日期排序。我已遵循the instructions并将sortBy和getSortDate属性添加到同位素选项对象。创建该同位素容器的代码（在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(); 
},

然后艺术家以与排序功能返回的值相同的顺序显示。为什么按姓名排序工作，但按性能日期排序不？

来源

2012-03-20 Dónal

您可以查看哪些值设置为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; 
}

来源

2012-03-20 13:19:47 desandro

同位素容器中的排序元素

回答

相关问题