Question

This runs fast compared to other’s.But i dont know how fast it would be at slow computers..
The code filters the results dymanically. The criteria are set in css class..

$(document).ready(function ()
{


    $("#filters a").click(function(event)
    {
        event.preventDefault();
        event.stopPropagation();
        if($(this).hasClass("checked"))
        {
            $(this).removeClass("checked");
        }
        else if(!$(this).hasClass("disabled"))
        {
            $(this).addClass("checked");
        }
        else
            {
                return false;
            }


        var results=$("#products li");
        results.hide();
        $("#filters li.filtersGroup a").removeClass("disabled");
        $("#filters li.filtersGroup").each(function(index) {
            var classes="";

            $(this).find("a.checked").each(function(index) {
                classes=classes+ "." + $(this).attr("id") +",";
            });
            if(classes=="") return true;

            results=results.filter(classes.substr(0,classes.length-1));
//periorismos
                $("#filters li.filtersGroup").not($(this)).each(function (index){
                    $(this).find("a").each(function(index) {


                if(results.filter("." + $(this).attr("id")).length<=0) {
                       $(this).removeClass("checked").addClass("disabled");
                   }

            });



        });
    });
    results.show();



})
});

Any ideas how to improve it? Also what can i do about preventdefault (itsnot triggered if the whole document isnt loaded,because this may be a problem for impacient people..

Answer 1

One thing I notice is you’re doing a lot of unnecessary calls to $():

    if($(this).hasClass("checked"))
    {
        $(this).removeClass("checked");
    }
    else if(!$(this).hasClass("disabled"))
    {
        $(this).addClass("checked");
    }
    else
    {
        return false;
    }

Every time you do $(this), there are multiple underlying function calls and a couple of memory allocations involved. It’s completely unnecssary. Just do:

var $this = $(this);

…at the beginning, and then:

    if($this.hasClass("checked"))
    {
        $this.removeClass("checked");
    }
    else if(!$this.hasClass("disabled"))
    {
        $this.addClass("checked");
    }
    else
    {
        return false;
    }

This (no pun) applies to any time you call $(), not just $(this), but you need to be sure you only cache the result for as long as it really will be unchanged (as that varies depending on the selector or element you’re passing in). Without reading through with a fine-toothed comb, for instance, you can probably cache the result of $("#filters li.filtersGroup") in at least one place rather than making jQuery do the whole thing over again.