同位素容器中的排序元素

在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

同位素容器中的排序元素

回答

相關問題