jQuery (Изотоп) - Комбинированная фильтрация и сортировка

Question

У меня возникла проблема с сортировкой с использованием библиотеки изотопов jQuery. Просто он не сортирует.

Принимая изотопный пример здесь для нескольких флажков от here. Поэтому для сортировки сортировки я добавляю данные для каждого div для сортировки. Работая с данным example при сортировке, попробуйте добавить эту функцию. Но я даже не могу заставить функцию сортировки Изотопа работать, даже в начале во время документа. Любые идеи, почему это не будет сортировать?

Вот мой пример кода: http://codepen.io/anon/pen/YXVBqW,

и вот соответствующий JavaScript:

$(function(){ 

    $container = $('#container'); 

    createContent(); 

    var $filterDisplay = $('#filter-display'); 

    $container.isotope(); 
    // do stuff when checkbox change 
    $('#options').on('change', function(jQEvent) { 
    var $checkbox = $(jQEvent.target); 
    manageCheckbox($checkbox); 

    var comboFilter = getComboFilter(filters); 

    $container.isotope({ filter: comboFilter }); 

    $filterDisplay.text(comboFilter); 
    }); 

    var $grid = $('.grid').isotope({ 
    itemSelector: '.item', 
    layoutMode: 'fitRows', 
    getSortData: { 
     color: '[data-color]', 
     number: '[data-number]' 
    }, 
    // sort by color then number 
    sortBy: [ 'color', 'number' ] 
    }); 

    // bind sort button click 
    $('.sort-by-button-group').on('click', 'button', function() { 
    var sortValue = $(this).attr('data-sort-value'); 
    // make an array of values 
    sortValue = sortValue.split(','); 
    $grid.isotope({ sortBy: sortValue }); 
    }); 

    // change is-checked class on buttons 
    $('.button-group').each(function(i, buttonGroup) { 
    var $buttonGroup = $(buttonGroup); 
    $buttonGroup.on('click', 'button', function() { 
     $buttonGroup.find('.is-checked').removeClass('is-checked'); 
     $(this).addClass('is-checked'); 
    }); 
    }); 

}); 


var data = { 
    brands: 'brand1 brand2 brand3 brand4'.split(' '), 
    productTypes: 'type1 type2 type3 type4'.split(' '), 
    colors: 'red blue yellow green'.split(' '), 
    sizes: 'uk-size8 uk-size9 uk-size10 uk-size11'.split(' ') 
}; 

function createContent() { 
    var brand, productType, color, size; 
    var items = ''; 
    // dynamically create content 
    for (var i=0, len1 = data.brands.length; i < len1; i++) { 
    brand = data.brands[i]; 
    for (var j=0, len2 = data.productTypes.length; j < len2; j++) { 
     productType = data.productTypes[j]; 
     for (var l=0, len3 = data.colors.length; l < len3; l++) { 
     color = data.colors[l]; 
     for (var k=0, len4 = data.sizes.length; k < len4; k++) { 
      size = data.sizes[k]; 
      var itemHtml = '<div class="item ' + brand + ' ' + 
      productType + ' ' + color + ' ' + size + '">' + 
      '<p>' + brand + '</p>' + 
      '<p>' + productType + '</p>' + 
      '<p>' + size + '</p>' + 
      '</div>'; 
      items += itemHtml; 
     } 
     } 
    } 
    } 

    $container.append(items); 
} 


function getComboFilter(filters) { 
    var i = 0; 
    var comboFilters = []; 
    var message = []; 

    for (var prop in filters) { 
    message.push(filters[ prop ].join(' ')); 
    var filterGroup = filters[ prop ]; 
    // skip to next filter group if it doesn't have any values 
    if (!filterGroup.length) { 
     continue; 
    } 
    if (i === 0) { 
     // copy to new array 
     comboFilters = filterGroup.slice(0); 
    } else { 
     var filterSelectors = []; 
     // copy to fresh array 
     var groupCombo = comboFilters.slice(0); // [ A, B ] 
     // merge filter Groups 
     for (var k=0, len3 = filterGroup.length; k < len3; k++) { 
     for (var j=0, len2 = groupCombo.length; j < len2; j++) { 
      filterSelectors.push(groupCombo[j] + filterGroup[k]); // [ 1, 2 ] 
     } 

     } 
     // apply filter selectors to combo filters for next group 
     comboFilters = filterSelectors; 
    } 
    i++; 
    } 

    var comboFilter = comboFilters.join(', '); 
    return comboFilter; 
} 

function manageCheckbox($checkbox) { 
    var checkbox = $checkbox[0]; 

    var group = $checkbox.parents('.option-set').attr('data-group'); 
    // create array for filter group, if not there yet 
    var filterGroup = filters[ group ]; 
    if (!filterGroup) { 
    filterGroup = filters[ group ] = []; 
    } 

    var isAll = $checkbox.hasClass('all'); 
    // reset filter group if the all box was checked 
    if (isAll) { 
    delete filters[ group ]; 
    if (!checkbox.checked) { 
     checkbox.checked = 'checked'; 
    } 
    } 
    // index of 
    var index = $.inArray(checkbox.value, filterGroup); 

    if (checkbox.checked) { 
    var selector = isAll ? 'input' : 'input.all'; 
    $checkbox.siblings(selector).removeAttr('checked'); 


    if (!isAll && index === -1) { 
     // add filter to group 
     filters[ group ].push(checkbox.value); 
    } 

    } else if (!isAll) { 
    // remove filter from group 
    filters[ group ].splice(index, 1); 
    // if unchecked the last box, check the all 
    if (!$checkbox.siblings('[checked]').length) { 
     $checkbox.siblings('input.all').attr('checked', 'checked'); 
    } 
    } 

} 

Answer 1

я думаю, что его, потому что вы не можете сортировать класс

нет никакой ценности объявлены. i должно быть

<div class="element-item transition metal" data-category="transition"> 
    <p class="number">79</p> 
    <h3 class="symbol">Au</h3> 
    <h2 class="name">Gold</h2> 
    <p class="weight">196.966569</p> 
</div>