сортировать элементы в контейнере изотопов - PullRequest
Новая
       3

сортировать элементы в контейнере изотопов

0 голосов
/ 20 марта 2012

На на этой странице , я использую плагин jQuery Isotope для размещения артистов в составе фестиваля. Я хочу, чтобы артисты были отсортированы по дате их выступления. Я следовал инструкциям и добавил свойства sortBy и getSortDate к объекту параметров Isotope. Код (в common.js), который создает контейнер Isotope: 

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);
});

Как видите, артисты не отсортированы по дате исполнения. Я отладил свою функцию сортировки и убедился, что она возвращает следующие значения

  • B.o.B (15 апреля) => 1334444400000
  • Боб Марли (20 апреля) => 1334876400000
  • Боб Дилан (26 апреля) => 1335394800000

Так что художники должны отображаться в указанном выше порядке. Любопытно, что если я заменю свою функцию сортировки на функцию, которая сортирует художников в алфавитном порядке по имени, например, 

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

Затем художники отображаются в том же порядке, что и значения, возвращаемые функцией сортировки. Почему сортировка по имени работает, а сортировка по дате выполнения - нет?

1 Ответ

0 голосов
/ 20 марта 2012

Вы можете проверить, какие значения были установлены для 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;
}
...