Quick jQuery selector question

BFCTom · 28 Mar 2013 at 18:07

Hi guys,

I've got a little jQuery filter using Isotope http://isotope.metafizzy.co/ which updates depending on a jQuery selector as it's filter.

Basically what I have is multiple option sets all with a few options within each and I'm struggling to get it to filter how I want it.

Is it possible in jQuery to do something like the following in a selector:

Optionset
Option 1 OR
Option 2 OR
Option 3

AND

Optionset
Option 1 OR
Option 2

AND

Optionset
Option 1 OR
Option 2

...and so on and so forth. I'm not sure I'm explaining myself too well

This combo filter method is kind of what I want, but only 1 item is allowed to be selected per optionset http://isotope.metafizzy.co/demos/combination-filters.html

Let me know if you need further explanation and thanks in advance for any help

Tripnologist · 28 Mar 2013 at 18:25

I think you're going to have to be a little more clear because unless I'm misunderstanding something, the combo filter is doing exactly what you're asking in your example.

Allowing you to choose one option from each of the sets.

BFCTom · 28 Mar 2013 at 18:30

I know, I said it was kind of doing what I wanted - but yeah I'm probably not clear enough sorry.

I'd like to be able to select any number of options from each optionset, but the logic applied for the filter should be as per my example.

Does that make more sense?

BFCTom · 29 Mar 2013 at 12:35

A little update to this, I've made an example so far using the combo filter thing here: http://codepen.io/anon/pen/zbiad

Basically what I want is to be able to click ANY number of options per optionset. So for instance if I click Black, Circle, then Small AND Medium clicked - the filter would display all black circles that are small OR medium. Also if something is selected, it can be unselected by clicking it again.

Cheers again for any help or pointers. I've a feeling I might be making a glaring error in my JavaScript on this bank holiday

BFCTom · 29 Mar 2013 at 12:46

Thinking out loud but could I use the :has() jQuery selector somehow? http://api.jquery.com/has-selector/

Deceptor · 29 Mar 2013 at 13:34

Sorry in a bit of a rush but I think this is what you're looking for? Or there abouts

Code:

$.fn.extend({
    hasAllClasses: function (selectors)
    {
        var self = this;
        for (i in selectors)
        {
            if (!$(self).hasClass(selectors[i]))
            {
                return false;
            }
        }
        return true;
    }
});

jQuery(document).ready(function($)
{
    var $container = $('.items')
    var $debug = $('.filter-output');

    $('ul.filter a').click(function(event)
    {
        var $this = $(this);
        var $optionSet = $this.parents('.option-set');
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');

        event.preventDefault();
        applyFilters();
        return false;
    });

    var getFilters = function()
    {
        return $('ul.filter a.selected').map(function()
        {
            return $(this).attr('data-filter-value');
        }).get();
    }

    var applyFilters = function()
    {
        applyFilter = getFilters();
        $debug.text(applyFilter.join(', '));

        $container.find('div').each(function()
        {
            console.log(applyFilter);
            var $this = $(this);
            $this.css('display', $this.hasAllClasses(applyFilter) ? '' : 'none');
        });
    }
});

BFCTom · 29 Mar 2013 at 14:02

Hey Deceptor,

I very much appreciate you having a bash at this, but just posted the JS into a fork of my code and it doesn't seem do do anything?

http://codepen.io/anon/pen/qivjl

BFCTom · 29 Mar 2013 at 14:37

I think I need some kind of function to iterate through all possible options updating the selector variable to something like:

.black.square, .blue.square

That would be if black and blue were selected in the first optionset and just square in the second optionset.

My JS is a limited so any pointers appreciated.

BFCTom · 29 Mar 2013 at 14:48

http://support.metafizzy.co/2012/combo-filter-checkboxes.html

This looks like a solution from the Github issues list, will try and implement

Deceptor · 29 Mar 2013 at 15:23

BFCTom said:
Hey Deceptor,

I very much appreciate you having a bash at this, but just posted the JS into a fork of my code and it doesn't seem do do anything?

http://codepen.io/anon/pen/qivjl

Sorry I forgot the mention you need to change the attributes for the class values, remove the "." in the HTML so the HTML would be:

Code:

<p class="filter-output">&nbsp;</p>

<ul class="filter option-set" data-filter-group="colours">
  <li><a href="#" data-filter-value="black">Black</a></li>
  <li><a href="#" data-filter-value="blue">Blue</a></li>
  <li><a href="#" data-filter-value="red">Red</a></li>
</ul>

<ul class="filter option-set" data-filter-group="shape">
  <li><a href="#" data-filter-value="square">Square</a></li>
  <li><a href="#" data-filter-value="circle">Circle</a></li>
</ul>

<ul class="filter option-set" data-filter-group="size">
  <li><a href="#" data-filter-value="small">Small</a></li>
  <li><a href="#" data-filter-value="medium">Medium</a></li>
  <li><a href="#" data-filter-value="large">Large</a></li>
</ul>

<div class="items">
  <div class="item black circle small"></div>
  <div class="item blue circle medium"></div>
  <div class="item red square large"></div>
  <div class="item blue circle large"></div>
  <div class="item black square small"></div>
  <div class="item red circle medium"></div>
  <div class="item black square medium"></div>
  <div class="item blue square small"></div>
</div>

BFCTom · 29 Mar 2013 at 15:40

Ah, no problem - I think I've got it now anyway!

http://codepen.io/anon/pen/vgmiB

Many thanks for the pointers mate.