I found this jsFiddle http://jsfiddle.net/Yvk9q/9/ that use isotope for bringing the element I want at the beginning.
I tried to copy that coda on my page but it doesn't work!
I really have no idea why $elem.hasClass is not a function ( I admit I've never used $elem before )
Can anyone help me to solve that?
Thanks!
jQuery(document).ready(function($) {
var $container = $('#homepage-grid');
$container.imagesLoaded( function(){
$container.isotope({
itemSelector: 'article',
masonry: {
columnWidth: 125
},
getSortData : {
milk : function( $elem ) {
var isMilk = $elem.hasClass('milk');
return (!isMilk?' ':'');
},
eggs : function( $elem ) {
var isEggs = $elem.hasClass('eggs');
return (!isEggs?' ':'');
},
bacon : function( $elem ) {
var isBacon = $elem.hasClass('bacon');
return (!isBacon?' ':'');
}
}
});
});
var $optionSets = $('#main-nav .option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[ key ] = value;
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
// changes in layout modes need extra logic
changeLayoutMode( $this, options )
} else {
// otherwise, apply new options
$container.isotope( options );
}
return false;
});
});
$elem
is not a JQuery object. If you want to use hasClass
(which can only be called on JQuery object) then you should convert it to JQuery object using $($elem)