使用 jQuery Quicksand 处理多个列表

Question

我正在尝试使用 jQuery Quicksand 从一组选项中过滤多个项目列表。

正如文档所建议的那样，我的插件功能基于一个简单的类（而不是 id）。这是我的 JS 代码：

$(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;
});

});

但是，当单击其中一个选项时，两个列表都将替换为第一个列表中的结果。您可以通过此 JSFiddle 看到这种情况：http://jsfiddle.net/Dhk9T/

我想我需要编辑.clone() 部分，也许是.each()，买我似乎无法让它工作。有什么建议！？

Answer 1

尝试给 ul-list 一个更进一步的类，例如

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

然后在你的 JS 代码中获取两个数据集，比如

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

并克隆两者，以在正确的数据集中找到正确的项目。