2

I am attempting to use jQuery Quicksand to filter more that one list of items from a single set of option.

I have the plugin functional based off of a simple class (instead of the id) as the documentation would suggest. Here is my JS code:

$(function() {

// get the action filter option item on page load
var $filterType = $('#filterOptions li.active a').attr('class');

// get and assign the ourHolder element to the $holder varible for use later
var $holder = $('ul.articles');

// clone all items within the pre-assigned $holder element
var $data = $holder.clone()
console.log($data);

// attempt to call Quicksand when a filter option item is clicked
$('#filterOptions li a').click(function(e) {
  // reset the active class on all the buttons
  $('#filterOptions li').removeClass('active');

  // assign the class of the clicked filter option element to our $filterType variable
  var $filterType = $(this).attr('class');
  $(this).parent().addClass('active');

  var $filteredData = $data.find('li[data-type=' + $filterType + ']');

  // call quicksand and assign transition parameters
  $holder.quicksand($filteredData, {
    duration: 800,
    easing: 'easeInOutQuad'
  });
  return false;
});

});

However, when clicking one of the options, both lists are replaced with the results from the first list. You can see this occurring via this JSFiddle: http://jsfiddle.net/Dhk9T/

I presume that I need to edit the .clone() section, perhaps with .each(), buy I can't seem to get this working. Any suggestions!?

Sheixt
  • 2,546
  • 12
  • 36
  • 65

1 Answers1

1

Try to give the ul-list a further class, e.g. 

<ul class="articles one">
<ul class="articles two">

an then grab both data-sets in your JS Code, like

var $holderOne = $('ul.articles.one');
var $holderTwo = $('ul.articles.two');

and clone both, to find the right items in the right data-sets.

cbinger
  • 34
  • 4
  • Here you can additionally find my example with additionall Stuff (two filters + sorting): http://jsfiddle.net/AVnzX/ – cbinger Jun 21 '13 at 13:23