Question

UPDATE 2:

Thanks so much for all your help. While all three solutions worked, I like Bill’s in terms of readability and performance. As always, I’m amazed by the level of expertise and help here. REALLY appreciate the help.

UPDATE:

Put demo up on jsfiddle: http://jsfiddle.net/FC4QE/17/

I need to create a filter. Users click on a brand name link and if there is a match then I need to filter out the other products. The brand is contained in a product name, so I’m searching for a match and if there is one or many, I need to hide the other products.

I have the following javascipt/jquery code:

$(function(){   
    $('#filter-by-brand li a').click(function(){
        // get html string of clicked item
        var brandNameSelected = $(this).html();
        var productContainer = $('#product-collection div.productBoxWrapper');

        // reset products in the view
        if (brandNameSelected == 'All Brands'){
            productContainer.fadeIn("slow");
        }
        // for each product title (a tag)
        $("#product-collection h4 a").each(function(){
            var productTitle = jQuery(this).html();

            // if item clicked is contained inside product title, hide all 
            // products and only show the ones where the title matched
            if(productTitle.indexOf(brandNameSelected) != -1){
                // hide container of all products, this hides all products
                productContainer.fadeOut("slow");
                // then show only ones that match. the problem is that only the one product is 
                // displayed since we're inside the .each. How can I show all  products where product title contains the item clicked? 
                $(this).parent().parent().parent().parent().fadeIn("slow");
            }
        });
    });
});

I explained everything in the comments inside the code, but basically, while the code works, because I’m showing the products where item clicked is contained inside the .each method, it only shows the last item matched. How can I show all the matched ones inside the .each or is this impossible and is there another way?

Hope this makes sense and that someone might have some advice!
Thanks.

Answer 1

I got the nicest looking results from this:

$('#filter-by-brand li a').click(function() 
{
    var brandNameSelected = $(this).html();
    var productContainer = $('#product-collection .product-container');

    if (brandNameSelected == 'All Brands')
    {
        productContainer.fadeIn("slow");
    }
    else {
        $(".product-container")
            .fadeOut(100)
            .delay(100)
            .filter(function() {
              return $(this).html().indexOf(brandNameSelected) > -1;  
            })
            .each(function(index, item) {
                $(item).fadeIn("slow");
            });


    }
});

You can play with it at http://jsfiddle.net/tu8tc/1/;