过滤jQuery的分裂列表

Question

看到：http://jasondaydesign.com/index2.html

我使用easylistsplitter.js布局投资组合项目。不幸的是，我的过滤器不适用于所有的项目。它仅过滤第一列。

想法？

谢谢！

Answer 1

我不太明白你是如何试图使用listsplitter与砖石插件一起...

砖石插件设置布局和拆分布局成你想要怎么过多少列。如果您查看布局页面，砌体将布局分为4列：#primary.listCol1，.listCol2,.listCol3和.listCol4.last。因此，之后应用列表分割不起作用，因为列表已被分割。

如果您尝试对列表进行排序，您可以查看tinysort插件，或者如果您只是想要一个很好的短脚本，则需要对this answer中的一个稍作修改。

---

更新：我正在查看可筛选的脚本，但我找不到一个很好的简单解决方案。但我确实发现this filterable tutorial这似乎更容易理解（对我来说）。我修改了它稍微使动画与您的过滤脚本，这是结果：

$(document).ready(function() { 
    $('ul#portfolio-filter a').click(function() { 
    $(this).css('outline','none'); 
    $('ul#portfolio-filter .current').removeClass('current'); 
    $(this).parent().addClass('current'); 

    var filterVal = $(this).text().toLowerCase().replace(' ','-'); 

    if(filterVal == 'all') { 
     $('.portfolio li.hidden').animate({ width: 'show', opacity: 'show' }, 1000).removeClass('hidden'); 
    } else { 
     $('.portfolio li').each(function() { 
     if(!$(this).hasClass(filterVal)) { 
      $(this).animate({ width: 'hide', opacity: 'hide' }, 1000).addClass('hidden'); 
     } else { 
      $(this).animate({ width: 'show', opacity: 'show' }, 1000).removeClass('hidden'); 
     } 
     }); 
    } 
    return false; 
    }); 
}); 

你不应该改变任何东西，除了上述取代“jquery.filterablepack.js”内容码。