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");
    });
  }
});

By "and" do you mean they have to have all the classes or any of the classes? — rink.attendant.6
– rink.attendant.6, Commented Jul 20, 2014 at 7:59

adeneo · Accepted Answer · 2014-07-20 09:15:34Z

5

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.

edited Jul 20, 2014 at 9:15

answered Jul 20, 2014 at 8:03

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Amin Jafari Over a year ago

works fine, but what if the user selects "all ranges"?

Vedant Terkar Over a year ago

Nice one mate, but it'll be more useful if you explain it. +1.

adeneo Over a year ago

@AminJafari - Works fine when selecting "all ranges" etc ?

Amin Jafari Over a year ago

@adeneo try selecting luxury and then again all ranges!

hematic101 Over a year ago

That's amazing thank you so much, works perfectly! I am going to spend the next few hours trying to decode what you did for next time :)

|

slaweet · Accepted Answer · 2014-07-20 09:19:42Z

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

doniyor · Accepted Answer · 2014-07-20 08:08:00Z

0

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/

answered Jul 20, 2014 at 8:08

doniyor

38k62 gold badges183 silver badges272 bronze badges

Comments

Ryan Mitchell · Accepted Answer · 2014-07-20 08:01:36Z

-1

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!");

answered Jul 20, 2014 at 8:01

Ryan Mitchell

7445 silver badges8 bronze badges

Collectives™ on Stack Overflow

Javascript / JQuery - Sorting by Multiple Classes

4 Answers 4

6 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related