アイソトープコンテナ内の要素を並べ替え

Question

this pageにjQueryアイソトーププラグインを使用して、祭りのラインナップでアーティストをレイアウトします。私はそのアーティストが演奏日によってソートされるようにしたい。私はthe instructionsに続き、同位体オプションオブジェクトにsortByとのプロパティを追加しました。同位体コンテナを作成します（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日）=>13344.444億
• ボブ・マーリー（4月20日）=>13348.764億
• ボブ・ディラン（4月26日を返すことを確認しました）=> 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); 
}); 

が、これはすべての3つの要素のundefinedを返します。

$.eachのreturnがそれぞれ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; 
}