Question

Ok so I’m using the quicksand jquery filter. now I want to add a particular effect (which I’ve typed in javascript) to all the images when any of the filters are selected. The filter list is as follows:-

<ul class="filter"> 
   <li class="current all"><a href="#">Fred</a></li> 
   <li class="daisy"><a href="#">daisy</a></li> 
   <li class="richard"><a href="#">richard</a></li> 
   <li class="ama"><a href="#">ama</a></li> 
   <li class="santy"><a href="#">santy</a></li> 
   <li class="washington"><a href="#">washington</a></li> 
   <li class="deuces"><a href="#">deuces</a></li> 
</ul> 

So I’m using the following syntax to determine the selected filter and work some jquery ‘magic’ from there.

    $(".filter a").click(function(e){

    $(".filter li").removeClass("current"); 

    // Get the class attribute value of the clicked link
    var $filterClass = $(this).parent().attr("class");

    if ( $filterClass == "all" ) {
        var $filteredPortfolio = $portfolioClone.find("li");
    } else {
        var $filteredPortfolio = $portfolioClone.find("li[data-type~=" + $filterClass + "]");
        $filteredPortfolio.addClass("row3");
    }

Now to add the special effect to the all the images of the selected filter (say photography), I added this code $("$filteredPortfolio").addClass("row3") which you see on the last line basically because the effect works on all elements with the class row3 yet when I debug this in my browser, it fails to work. What am I doing wrong? I still consider myself a jquery newbie so please pardon me if the answer is obvious.

Answer 1

Your last line should be:

$filteredPortfolio.addClass("row3");

.find() is alrady producing a jQuery object, so there’s no need for the extra $()

You are filtering on [data-type=..], which is fine if there is a data-type attribute defined in HTML, but won’t work if you are setting it via the .data(‘type’, val) jQuery api. For the filter to find it, you must use .attr(‘data-type’, val). Newer versions of jQuery better differentiate between data and attributes, which are actually separate things. jQuery used to conflate them and using them interchangeably might have worked in an older version.