Question

based my previous question asked here:
Jquery Filter List DIVs via checkboxes
i got in the situation when both checkboxes and the list is generated from javascript so if i look in view source i could’t see them .
I manage to find out that i could access the checkboxes via:

$(".bedroomType").attr("type", "input").change(function(){}

but i can’t make the list to filter…
How should be changed in this case this code?

 $(".bedroomType").attr("type", "input").change(function(){
   $(".bedroomType").attr("type", "input").each(function(){

        var checked = $(this).attr('checked') || false;
        var numberofrooms = $(this).data('bedrooms');
        alert(numberofrooms);
        $('.listing').each(function(){
            if ($(this).data('bedrooms')==numberofrooms){
                checked ? $(this).show() : $(this).hide();
            }
        });
    });

thank you

Answer 1

Your sample code won’t work because you cannot give the filter authority to both show() AND hide() items in the listing. In general, a filter should either show() OR hide() (or similar), and in this case it should hide().

You will find it more convenient to organise the code into a ‘master’ filter that calls the ‘bedroom’ filter and (eventually) other filters. The master should ensure that all listing items are initially shown, so that the filters can selectively hide them.

It is tempting to think that you could alternatively do things the other way round – namely to hide() all items initially, then allow the filters to selectively show(). But this would not work because no individual filter should have the authority to show() – other filters may have a different opinion! With a filter-set of this type, you want items to show only if they meet ALL criteria, not ANY one.

Here’s some code:

function filterListingByBedrooms($listing){
    var selectedBeds = [];
    $(".bedroomType").each(function(){
        if(this.checked) {
            selectedBeds.push($(this).data('bedrooms'));//build array of checked bedroom numbers
        }
    });
    $listing.each(function(){
        var $this = $(this);
        if(!$.inArray($this.data('bedrooms'), selectedBeds)) {
            $this.hide();
        }
    });
}

function filterListingByType($listing){
    ...;
}

function filterListingByLocation($listing){
    ...;
}

function filterListing(){
    var $listing = $('.listing').show();//Initially show all, then allow filters to selectively hide.
    filterListingByBedrooms($listing);
    filterListingByType($listing);//apply other filter
    filterListingByLocation($listing);//apply other filter
};

$(".bedroomType").change(filterListing);
$(".propertyType").change(filterListing);
$(".location").change(filterListing);