Question

I’m filtering an ASP.NET repeater that’s outputting over 2000 divs on the client side using jQuery. The ItemTemplate of the repeater holds a div (runat=”server”). In the repeater OnItemDataBound event, I have some logic to apply css classes according to the data. I then have some links with id’s having the same name as the css classes so that when one clicks a link, the jQuery hides all divs outputted by the repeater that don’t have a matching id/class combo. Also, there are some cases where there are more than one class applied to the divs.

Everything works fine the first 2 or so times I click a link to filter the divs, but then it gets hung up, becoming unresponsive.

The jQuery:

$(document).ready(function () {
    $('#filters a').click(function (e) {
        e.preventDefault();
        if ($(this).attr('id') == 'all') {
            $('#divIssueMenu').children().show();
        }
        else {
            var filter = $(this).attr('id');
            $('#divIssueMenu').children().show();
            $('#divIssueMenu').children().not('.' + filter).hide();
        }
    });
});

And outputted markup:

<div id='filters'>
    <a href='#' id="all" >All</a> | 
    <a href='#' id='filter1'>Filter 1</a> | 
    <a href='#' id='filter2'>Filter 2</a> | 
    <a href='#' id='filter3'>Filter 2</a> |
    and so on...
    <div class='clear'></div>
</div>
<div id="divIssueMenu">
    Menu

    <div id="rpMenu_divMenu_0" class="filter1">
       data here...
    </div>

    <div id="rpMenu_divMenu_1" class="filter2">
        more data...
    </div>

    <div id="rpMenu_divMenu_2" class="filter1 filter2">
        more data...
    </div>

    <div id="rpMenu_divMenu_3" class="filter1 filter2 filter3">
        more data...
    </div>


    and so on, about 2000+ records...
</div>

Any way to make this more efficient? Is that the issue?
Thanks in advance!

Answer 1

In terms of performance, I would be tempted to cache my items and show or hide based on that

var $all = $('div','#divIssueMenu');
var $filter1 = $('div.filter1','#divIssueMenu');
var $filter2 = $('div.filter2','#divIssueMenu');
var $filter3 = $('div.filter3','#divIssueMenu');

You could then put the filters in a associative array to assign the id to the right set

var filters = {all:$all, filter1:$filter1, filter2:$filter2, filter3:$filter3}

The click code would then be:

$('#filters a').click(function (e) {
    e.preventDefault();
    var id = $(this).attr('id');
    $all.hide();
    filters[id].show();
});

The advantage of this is not having to evaluate the selectors every time a click is made.

Live example: http://jsfiddle.net/maZD7/