Filtering Content with jQuery and CSS

Question

I have a list of content that I'd like to filter based on their class names. When someone clicks on one of the two menus, the content with that menu item's class should show. Some content items have more than one class and users can filter from both menus.

The problem with my code is that each menu click doesn't reset the list of items. It filters on the items left over after the first menu click.

Thanks in advance for your help.

$(document).ready(function () {
    $('.filter li a').click(function () {
        var partnerResources = $(this).attr('class');
        $('.filter li').removeClass('active');
        $(this).parent().addClass('active');

        if (partnerResources == 'all') {
            $('#list-area').children('div').fadeIn(500);
        } else {
            $('#list-area').children('div:not(.' + partnerResources + ')').fadeOut(500);
            $('#list-area').children('div:has(.' + partnerResources + ')').fadeIn(500);
        }
        return false;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul class="filter">
    <li class="active"><a href="#" class="all">All</a>
    </li>
    <li><a href="#" class="welcome-kit">Welcome Kit</a>
    </li>
    <li><a href="#" class="forms">Forms</a>
    </li>
</ul>
<hr />
<ul class="filter">
    <li class="active"><a href="#" class="all">All</a>
    </li>
    <li><a href="#" class="automotive">Automotive</a>
    </li>
    <li><a href="#" class="retail">Retail</a>
    </li>
</ul>
<hr />
<div id="list-area">
    <div class="welcome-kit retail">welcome retail</div>
    <div class="forms">forms</div>
    <div class="forms retail">forms retail</div>
    <div class="welcome-kit automotive">welcome autmotive</div>
    <div class="forms">forms</div>
    <div class="welcome-kit forms">welcome forms</div>
    <div class="welcome-kit automotive">welcome automotive</div>
    <div class="welcome-kit">welcome</div>
    <div class="welcome-kit forms">welcome forms</div>
    <div class="forms">forms</div>
</div>

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Quick Fix

You made a simple mistake: your div:has class selector isn't selecting the elements you want to show!

Simply replace that line with a plain-jane class selector:

$('#list-area').children('div.' + partnerResources).fadeIn(500);

Working JSFiddle: http://jsfiddle.net/1t1b7gzf/

Explanation

:has selects elements that have children matching the given selector. It doesn't check the current matched element. Reference the .has documentation:

:has() selector

Selects elements which contain at least one element that matches the specified selector.

The expression $( "div:has(p)" ) matches a <div> if a <p> exists anywhere among its descendants, not just as a direct child.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 17, 2015 at 7:42

Just Jake

4,9285 gold badges30 silver badges33 bronze badges

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

1 Comment

Alan Weibel Over a year ago

Thanks for the explanation Jake. I misunderstood how to use :has().

void · Accepted Answer · 2015-02-17 07:36:06Z

1

Do it with .hasClass

$(document).ready(function () {
    $('.filter li a').click(function () {
        var partnerResources = $(this).hasClass('all');
        $('.filter li').removeClass('active');
        $(this).parent().addClass('active');

        if (partnerResources) {
            $('#list-area').children('div').fadeIn(500);
        } else {
            $('#list-area').children('div:not(.' + partnerResources + ')').fadeOut(500);
            $('#list-area').children('div:has(.' + partnerResources + ')').fadeIn(500);
        }
        return false;
    });
});

answered Feb 17, 2015 at 7:36

void

36.8k10 gold badges72 silver badges111 bronze badges

Comments

Naeem Shaikh · Accepted Answer · 2015-02-17 07:39:40Z

1

you can do like this, http://jsfiddle.net/vwwyqpvc/,

$(document).ready(function () {
    $('.filter li a').click(function () {
        var partnerResources = $(this).attr('class');
        $('.filter li').removeClass('active');
        $(this).parent().addClass('active');

        if (partnerResources == 'all') {
            $('#list-area').children('div').fadeIn(500);
        } else {
           $('#list-area').children('div').fadeIn(500).end().children('div:not(.' + partnerResources + ')').fadeOut(500).end().children('div:has(.' + partnerResources + ')').fadeIn(500);
        }
        return false;
    });
});

Add the elements again to the div, and then filter out, on each click of menu

answered Feb 17, 2015 at 7:39

Naeem Shaikh

15.8k8 gold badges53 silver badges92 bronze badges

Collectives™ on Stack Overflow

Filtering Content with jQuery and CSS

3 Answers 3

Quick Fix

Explanation

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Quick Fix

Explanation

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related