Check if a div has all four classes

Question

Basically this is a filter for wordpress.

All posts are shown in one page and I have added category names as classes to the main div (.box) of a post where one div will have multiple classes.

There are fours drop downs in the filter widget with all the categories listed as options.

I wanted to show only that div which has all the active category names as classes.

Following is the code. With the IF condition, how can I use idea of "AND"?

This code gives me an error.

$('#filter select').change(function()
    {
            var upper=$('#upper').val();
            var sole=$('#sole').val();
            var toe=$('#toe').val();
            var midsole=$('#midsole').val();

            $('.box').each(function()
            {

                if($(this).hasClass(upper) && hasClass(sole) && hasClass(toe) && hasClass(midsole))
                {
                    $(this).show();
                }
                else{
                    $(this).hide();
                }
    });

});

You may probably have to look at http://stackoverflow.com/questions/2214952/jquery-hasclass-check-for-more-than-one-class — Vigneswaran Marimuthu, Apr 29 '15 at 06:33

score 4 · Accepted Answer · answered Apr 29 '15 at 06:32

You can use $.fn.filter method like this with combined class selected:

$('#filter select').change(function () {
    var upper = $('#upper').val();
    var sole = $('#sole').val();
    var toe = $('#toe').val();
    var midsole = $('#midsole').val();

    var classes = '.' + [upper, sole, toe, midsole].join('.');
    $('.box').hide().filter(classes).show();
});

Basically, construction '.' + [upper, sole, toe, midsole].join('.') produces a string of four classes concatenated with . character: .class1.class2.class3.class4, which is a CSS selector for .box element having all 4 classes at the same time.

This is sick man! Worked right away. Just one more question. The first option of each dropdown list is "all" which I added manually. How do I make it work so that posts with one of the categories under that dropdown will show up if ALL is selected? Thanks a lot for the help dude. — Rahul, Apr 29 '15 at 07:06

score 3 · Answer 2 · answered Apr 29 '15 at 06:30

3

You forgot $(this) to hasClass.

if($(this).hasClass(upper) && $(this).hasClass(sole) && $(this).hasClass(toe) && $(this).hasClass(midsole)) {
    // Yes this div has all four classes
}

answered Apr 29 '15 at 06:30

Tushar

85,780
21
159
179

score 0 · Answer 3 · answered Apr 29 '15 at 06:31

var ele=$(this);

if(ele.hasClass(upper) && ele.hasClass(sole) && ele.hasClass(toe) && ele.hasClass(midsole))

You have to give $(this) to all the .hasClass API in the if condition.
So instead of repeating it assign it to a variable and use it as above.

score 0 · Answer 4 · answered Apr 29 '15 at 06:32

0

Your forgot the object jquery selector $(this).

    if ($(this).hasClass(upper) && $(this).hasClass(sole) && $(this).hasClass(toe) && $(this).hasClass(midsole)) {
        ...
    }

answered Apr 29 '15 at 06:32

Radonirina Maminiaina

6,958
4
33
60

score 0 · Answer 5 · answered Apr 29 '15 at 06:37

0

You can use this.hasClass("class1 class2 class3") if you sure in order, else

this.hasClass("class1) && this.hasClass("class2 ")

answered Apr 29 '15 at 06:37

lails

105
11

Staplerz · Answer 6 · 2015-04-29T06:54:59.890

0

A more beautiful way to do this: $("#myId").is(".foo.bar")

Edit: this is also independent of the order of classes

edited Apr 29 '15 at 06:54

answered Apr 29 '15 at 06:42

Staplerz

85
1
10

Check if a div has all four classes

6 Answers6