I have this list of items I want to filter through:

<ul id="container">
    <li class="item filter">This is where I'd put my filters</li>
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
</ul>

So then I want to execute it like so...

  $container.isotope({
    itemSelector : '.item'
  });

...but I want an option like ignore: '.filter'. Is something like that doable?

The whole goal is to put the filters inside the container, taking on the same styles and transitions.

I have this list of items I want to filter through:

<ul id="container">
    <li class="item filter">This is where I'd put my filters</li>
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
</ul>

So then I want to execute it like so...

  $container.isotope({
    itemSelector : '.item'
  });

...but I want an option like ignore: '.filter'. Is something like that doable?

The whole goal is to put the filters inside the container, taking on the same styles and transitions.

• javascript
• jquery
• jquery-isotope
• masonry

1 Answer 1

$container.isotope({
    itemSelector : '.item:not(.filter)'
});

Simply use the :not() selector.

EDIT:

You suggest wanting to include it in the initial isotope selection, and for it to act as an item of the isotope, except not be filterable - at least this is how I am understanding you.
So to achieve this, keep your original:

$container.isotope({
    itemSelector : '.item'
});

And later, when you do your filters, simply always include , .filter
Example:

//Assume something got clicked, which had a data-filter attribute.
var filters = $(this).data('filter');
$container.isotope({
    filter: filters +', .filter'
});