동위 원소 컨테이너의 요소 정렬

Question

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

당신은 예술가가 성능 날짜별로 정렬되지 않습니다 볼 수 있듯이. 나는 다음과 같은 값

• 밥 ((15) 년 4 월) => 1334444400000
• 밥 말리 ((20) 년 4 월) => 1334876400000
• 밥 딜런 (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); 
}); 

는,이 세 가지 요소에 대한 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; 
}