如何在使用Jquery Isotope插件动态插入项目之后将默认过滤器应用于容器？ [英] How to apply a default filter to the container after dynamic insertion of items using Jquery Isotope plugin?

问题描述

我正在使用同位素插件。我有一个空的容器，我在 $（document）.ready（...

所有这些项目都被正确添加，同位素的布局和链接上的筛选工作完美。

但是，我想能够直接在某个项目类上应用筛选器它们被追加到容器后，甚至更好，插入过程中。

如何做到这一点？

继续，我有一个'.home'过滤器，我希望一旦所有的项目被添加到容器，而不需要点击一个家庭过滤器应用。

 < ul id =
 
过滤器> 
< li>< a href =＃data-filter =。home>全部显示< / a>< / li>< < / a>< / li> 
< li>< a href =＃data-filter = 。当>在< / A>< /立GT ; 
< li>< a href =＃data-filter =。why>为什么？< / a>< / li> 
 //等等... 
< / ul> 
  

您可以运行一个函数来预设过滤器，一旦DOM已经完全构建完毕

$ b $

  $（function（）{
 //同位元素... 
 $ container.isotope（{filter：' .home'}）; 
 // more同位元素... 
}）; 
  

和Isotope已被初始化。请参阅此修改过的DeSandro小提琴，其中初始视图将被过滤以仅显示红色元素。

更新将初始内容加载到空的#container中（通过Ajax？），可以使用插入方法，或者只是隐藏#container，直到所有元素都被加载和排序。关于Ajax和成功初始化同位素，请参阅这里的答案 。

I'm using the Isotope Plugin. I have an empty container to which I am adding items on $(document).ready(...

All those items are added correctly and isotope's layout and filtering on links are working perfectly.

However, I would like to be able to apply a filter on a certain item class directly after they are appended to the container, or even better, during the insertion.

How to do that?

To resume, I have a '.home' filter that I would like to be applied once all items are appended to the container in stead of needing to click a "home" filter.

解决方案

If you have something simple like

<ul id="filters">
    <li><a href="#" data-filter=".home">Show all</a></li>
    <li><a href="#" data-filter=".what">What?</a></li>
    <li><a href="#" data-filter=".when">When?</a></li>
    <li><a href="#" data-filter=".why">Why?</a></li>
    // and so forth...
</ul>

you could just run a function to preset filtering, once the DOM has been fully constructed

$(function() {
    // Isotope stuff...
    $container.isotope({filter: '.home'});
    // more Isotope stuff...
});

and Isotope has been initialised. See this modified DeSandro fiddle in which the initial view is filtered to show only the red elements.

UPDATE Loading the initial content into an empty #container (via Ajax?), you could use the insert method or just hide the #container until all elements have been loaded and sorted. Regarding Ajax and initialising Isotope on success, see also this SO answer here.

这篇关于如何在使用Jquery Isotope插件动态插入项目之后将默认过滤器应用于容器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！