I'm trying to set up a quicksand with multiple filters and the approach I'm taking in the following which I'm not sure if it's the best.
$filteredItems = $containerClone.find('.portfolio-item-marketing').filter(function(index){
if ( $filterA != 'all' && $filterB != 'all' )
{
return jQuery(this).find('.portfolio-item-marketing[data-type~=' + $filterA + ']') || jQuery(this).find('.portfolio-item-marketing[data-type~=' + $filterB + ']');
}
if ( $filterA != 'all' && $filterB == 'all' )
{
return jQuery(this+'[data-type~='+$filterA+']') ;
}
if ( $filterA == 'all' && $filterB != 'all' )
{
return jQuery(this).find('.portfolio-item-marketing[data-type~=' + $filterB + ']');
}
if ( $filterA == 'all' && $filterB == 'all' )
{
return jQuery(this).find('.portfolio-item-marketing');
}
});
As you see in the code I tried 2 different methods ( First "if" and second "if" ). I'm not sure if I can use find inside a filter but i also dont know how to get the attribute from the jQuery object.
I can not use
jQuery(this).attr('data-type') == $filterA
Because the attribute maybe contain various filters. That's why I'm trying to use jQuery "~="
Should I give up and end using a indexOf ?
HTML markup for example:
<ul class="filterA filters">
<li class="active"><a href="javascript:void(0)" class="all">All</a></li>
<li><a href="javascript:void(0)" class="digital-books">Digital Books</a></li>
<li><a href="javascript:void(0)" class="pdf">Pdf</a></li>
</ul>
<ul class="filterB filters">
<li class="active"><a href="javascript:void(0)" class="all">All</a></li>
<li><a href="javascript:void(0)" class="3m">3M</a></li>
<li><a href="javascript:void(0)" class="mcdonald">Mc Donald</a></li>
<li><a href="javascript:void(0)" class="sony">Sony</a></li>
</ul>
<div id="portfolio-wrap" class="clearfix">
<div class="portfolio-item-marketing" data-id="1" data-type="digital-books 3m "></div>
<div class="portfolio-item-marketing" data-id="1" data-type="pdf 3m "></div>
<div class="portfolio-item-marketing" data-id="1" data-type="digital-books sony "></div>
<div class="portfolio-item-marketing" data-id="1" data-type="pdf mcdonald "></div>
</div>
Quicksand Filter script :
jQuery(document).ready(function(){
if(jQuery().quicksand) {
portfolio_quicksand();
}
});
function portfolio_quicksand() {
// Setting up our variables
var $filter;
var $container;
var $containerClone;
var $filterLink;
var $filteredItems
// Set our filter
$filterA = jQuery('.filterA li.active a').attr('class');
$filterB = jQuery('.filterB li.active a').attr('class');
// Set our filter link
$filterLink = jQuery('.filters li a');
// Set our container
$container = jQuery('#portfolio-wrap');
// Clone our container
$containerClone = $container.clone();
// Apply our Quicksand to work on a click function
// for each of the filter li link elements
$filterLink.click(function(e)
{
// Remove the active class
jQuery(this).parent().parent().find('li').removeClass('active');
// Apply the 'active' class to the clicked link
jQuery(this).parent().addClass('active');
// Set our filter
$filterA = jQuery('.filterA li.active a').attr('class');
$filterB = jQuery('.filterB li.active a').attr('class');
$filteredItems = $containerClone.find('.portfolio-item-marketing').filter(function(index){
if ( $filterA != 'all' && $filterB != 'all' )
{
return jQuery(this).find('.portfolio-item-marketing[data-type~=' + $filterA + ']') || jQuery(this).find('.portfolio-item-marketing[data-type~=' + $filterB + ']');
}
if ( $filterA != 'all' && $filterB == 'all' )
{
return jQuery(this+'[data-type~='+$filterA+']') ;
}
if ( $filterA == 'all' && $filterB != 'all' )
{
return jQuery(this).find('.portfolio-item-marketing[data-type~=' + $filterB + ']');
}
if ( $filterA == 'all' && $filterB == 'all' )
{
return jQuery(this).find('.portfolio-item-marketing');
}
});
// Finally call the Quicksand function
$container.quicksand($filteredItems,
{
// The duration for the animation
duration: 750,
// The easing effect when animating
easing: 'easeInOutCirc',
// Height adjustment set to dynamic
adjustHeight: 'dynamic'
});
});
}