CODEWITHSUNDEEP
javascriptjqueryhtmlcss
BlacBunny
BlacBunny

Reputation: 13

Apply multiple filter categories to a list of <li>(s) with javascript

I have this fiddle and I want to know how I can implement filtering function based on two categories. when someone click the filter, it should get the values from both the current filters selection, hide the list and show only the filter result. Any idea on how to implement this step? any help would be appreciated!!

<ul style='list-style-type: none;' class="filter1">
<li><span class="filtercat1">red</span>

</li>
<li><span class="filtercat1">blue</span>

</li>
<li><span class="filtercat1">yellow</span>

</li>
<li><span class="filtercat1">all</span>

</li>
</ul> <span id="filterbutton1">
    <a href="#" id="prev">« Previous</a> 
    <a href="#" id="next">Next »</a>

</span>

<ul style='list-style-type: none;' class="filter2">
<li><span class="filtercat2">orange</span>

</li>
<li><span class="filtercat2">apple</span>

</li>
<li><span class="filtercat2">papaya</span>

</li>
<li><span class="filtercat2">all</span>

</li>
</ul> <span id="filterbutton2">
    <a href="#" id="prev2">« Previous</a>
    <a href="#" id="next2">Next »</a>
</span>

<ul id='list'>
<li class="">red orange</li>
<li class="">red apple</li>
<li class="">red papaya</li>
<li class="">blue orange</li>
<li class="">blue apple</li>
<li class="">blue papaya</li>
<li class="">yellow orange</li>
<li class="">yellow apple</li>
<li class="">yellow papaya</li>
</ul>
<span id="filterbutton">
    <a href="#" id="filter"> filter</a>

<span id="resetbutton">
    <a href="#" id="reset"> reset</a>


$(function () {
    var all = $('.filtercat1').addClass("passiv");

    var i = -1;

    $('#prev' ).click(function () {
        ctrlbutton(i = !i ? all.length - 1 : --i);
    });
    $('#next').click(function () {
        ctrlbutton(i = ++i % all.length);
    }).click();

    function ctrlbutton(ele) {
        all.removeClass("active").addClass("passiv");
        all.eq(ele).removeClass("passiv").addClass("active");
    }


})

$(function () {
    var all = $('.filtercat2').addClass("passiv");

    var i = -1;

    $('#prev2').click(function () {
        ctrlbutton(i = !i ? all.length - 1 : --i);
    });
    $('#next2').click(function () {
        ctrlbutton(i = ++i % all.length);
    }).click();

    function ctrlbutton(ele) {
        all.removeClass("active").addClass("passiv");
        all.eq(ele).removeClass("passiv").addClass("active");
    }


})

fiddle: http://jsfiddle.net/BlacBunny/5tfcuy1w/

Upvotes: 0

Views: 1419

Answers (4)

Setr&#225;kus Ra
Setr&#225;kus Ra

Reputation: 255

Try the contains selector

$('#filter').click(function() {
    $("#list li").addClass("passiv");
    var filter1 = $(".filter1 span.active").text();
    var filter2 = $(".filter2 span.active").text();

    var filter= (filter1 == "all" ? "" : filter1) + " " + (filter2 == "all" ? "" : filter2);

    $('#list li:contains("' + filter + '")').removeClass("passiv");        
});

http://jsfiddle.net/5tfcuy1w/10/

Upvotes: 0

Baga
Baga

Reputation: 1442

Fiddle

$("#filter").click(function() {
    var filterCat1 = $(".filter1 .active").text();
    var filterCat2 = $(".filter2 .active").text();


    $("#list li").each( function( index, element ){
        var text = $(element).text();
        if((text.indexOf(filterCat1) < 0 && filterCat1 != "all") 
           || (text.indexOf(filterCat2) < 0 && filterCat2 != "all"))
            $(element).removeClass("active").addClass("passiv");
        else
            $(element).removeClass("passiv").addClass("active");
    });
});

Upvotes: 0

Ranjit Singh
Ranjit Singh

Reputation: 3735

Use this code

$("#list").find("li").each(function(){
    this.className = "all "+this.innerHTML;
});
    $("#filter").click(function(){
        var class1 = $(".filter1").find(".active").text();
        var class2 = $(".filter2").find(".active").text();
        $("#list").find("li").addClass("passiv").end().find("."+class1+"."+class2)
        .removeClass("passiv").addClass("active");
    });
    $("#reset").click(function(){
        $("#list").find("li").addClass("active").removeClass("passiv");
    });

I have not optimized this code. You are using dom ready function two times which is actually not required.

You can see the fiddle here

Upvotes: 1

khakiout
khakiout

Reputation: 2400

See Fiddle

This function will be called every time the filters are modified. The values of filter1 and filter2 must be modified per click to the filter buttons.

var filter1 = 'red'; // initial value of filter1
var filter2 = 'orange'; // initial value of filter2

function filterList() {
    var list = $('#list li');
    
    list.each(function(index, item) {
        var itemContents = $(item).text();
        
        if (itemContents.indexOf(filter1) >= 0 && itemContents.indexOf(filter2) >= 0) {
            $(item).show();
        } else {
            console.log('hide ' + itemContents);
        }
    });
}

Upvotes: 0

Related Questions