Question

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.

Answer 1

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.