1

このページでは、jQuery Isotope プラグインを使用して、アーティストをフェスティバルのラインナップにレイアウトしています。アーティストを公演日順にソートしてほしい。指示に従い、Isotope オプション オブジェクトにプロパティを追加sortByしました。Isotope コンテナを作成する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();
},

次に、並べ替え関数によって返された値と同じ順序でアーティストが表示されます。名前順のソートは機能するのに、公演日順のソートが機能しないのはなぜですか?

4

1 に答える 1

-1

次のように、sortData に設定された値を確認できます。

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

あなたの場合、これはundefined3 つの要素すべてに対して返されます。

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 に答える