关于使用HTML Select选项对jQuery同位素进行排序的问题

Question

Using jQuery and isotope plugin I have some issue on sorting items by changing dropdown list. Can you please take a look at this demo and let me know why I am not able to sort the isotope container when I select a sort value?

Here is the part which I am using for sorting

  $('#sorts').on( 'change', function() {
    var sortByValue = this.value;
      console.log(sortByValue);
    $container.isotope({ sortBy: sortByValue });
  });  

and here is the whole isotope part code:

$( function() {
  // init Isotope
  var $container = $('.isotope').isotope({
    itemSelector: '.element-item',
    layoutMode: 'fitRows'
  });
  // filter functions
  var filterFns = {
    // show if number is greater than 50
    numberGreaterThan50: function() {
      var number = $(this).find('.number').text();
      return parseInt( number, 10 ) > 50;
    },
    // show if name ends with -ium
    ium: function() {
      var name = $(this).find('.name').text();
      return name.match( /ium$/ );
    }
  };
  // bind filter on select change
  $('#filters').on( 'change', function() {
    // get filter value from option value
    var filterValue = this.value;
    // use filterFn if matches value
    filterValue = filterFns[ filterValue ] || filterValue;
    $container.isotope({ filter: filterValue });
  });

   // bind sort button click
  $('#sorts').on( 'change', function() {
    var sortByValue = this.value;
      console.log(sortByValue);
    $container.isotope({ sortBy: sortByValue });
  });  

});

Answer 1

i have checked this example, see if it works

$('.isotope').isotope({
    itemSelector: '.element-item',
    layoutMode: 'fitRows',
    getSortData: {
      name: '.name',
      symbol: '.symbol',
      number: '.number parseInt',
      category: '[data-category]',
      weight: function( itemElem ) {
        var weight = $( itemElem ).find('.weight').text();
        return parseFloat( weight.replace( /[\(\)]/g, '') );
      }
    }
  });

check the example in the website