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

Share Improve this question Follow edited Oct 20, 2014 at 6:00 Sameera Thilakasiri 9,5081010 gold badges5353 silver badges8787 bronze badges asked Oct 23, 2012 at 23:30 developdalydevelopdaly 1,37533 gold badges1616 silver badges2626 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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