Javascript / JQuery - Sorting by Multiple Classes

Question

having a bit of trouble here, any help would be greatly appreciated...

I am trying to hide and show a bunch of list items based on several classes assigned to them.

In my JS Fiddle Example I have several items with classes relating to their description.

I have managed to hide and show these, but complex selections are not possible...

example: If I wanted to only see fabrics that are "premium", "blue" and "linen".

Something like this (that works lol) is what I am after...

$('.sel_range').click(function() {
  range = document.getElementById("range").value;
  if ($('.fabric_option').hasClass(range)) {
    $('.' + range).fadeIn('fast', function() {
       !$('.fabric_option').hasClass(range).fadeOut("fast");
    });
  }
});

Answer 1

Something like this should work

var selects = $('#range, #fabric, #colour');

selects.on('change', function() {
    var el = selects.map(function(i, item) {
        return item.value.indexOf('all_') === 0 ? '' : '.' + item.value;
    }).get().filter(function(x)  { 
        return x.length; 
    }).join('');

    $('#fabric_options li').show().not(s?s:'*').hide();
});

FIDDLE

It starts with showing all the list items, then joins the values together to create a clas selector, leaving out the class if all_something is selected etc. and then hides everything that doesn't match, and if nothing is selected excludes everything.

Answer 2

I think it can be solved like this:

var range, fabric, colour;

var updateShown = function() {
    $('li').show()
    if (range) {
        $('li:not(.' + range + ')').hide();
    }
    if (fabric) {
        $('li:not(.' + fabric + ')').hide();
    }
    if (colour) {
        $('li:not(.' + colour + ')').hide();
    }
}

// Range
$('#range').change(function() {
    range = $(this).val();
    updateShown();
});

// Fabric
$('#fabric').change(function() {
    fabric = $(this).val();
    updateShown();
});

// Colour
$('#colour').change(function() {
    colour = $(this).val();
    updateShown();
});

With value="" of each select first option

<select id="range">
  <option class="sel_range" value="">All Ranges</option>
  <option class="sel_range" value="luxury">Luxury</option>
  <option class="sel_range" value="premium">Premium</option>
  <option class="sel_range" value="base">Base</option>
</select>

<select id="fabric">
  <option class="sel_fabric" value="">All Fabrics</option>
  <option class="sel_fabric" value="leather">Leather</option>
  <option class="sel_fabric" value="linen">Linen</option>
  <option class="sel_fabric" value="cotton">Cotton</option>
</select>

<select id="colour">
  <option class="sel_colour" value="">All Colours</option>
  <option class="sel_colour" value="red">Red</option>
  <option class="sel_colour" value="blue">Blue</option>
  <option class="sel_colour" value="green">Green</option>
</select>

jsFiddle demo

Answer 3

what about this?

$('#range').on('change',function () {
    range = $("#range").val();
    $('li').each(function(){
        if(!$(this).hasClass(range)){
            $(this).hide();
        }else{
            $(this).show();
        }
    });

});
// just for range, rest in fiddle

http://jsfiddle.net/J3EZX/6/

Answer 4

If you're using jQuery, just string them together with a . and no space, e.g.:

$(".linen.red.base").text("Help! I'm being replaced!");