1

我正在过滤一个 ASP.NET 中继器，该中继器使用 jQuery 在客户端输出超过 2000 个 div。中继器的 ItemTemplate 包含一个 div (runat="server")。在转发器 OnItemDataBound 事件中，我有一些逻辑可以根据数据应用 css 类。然后，我有一些 id 与 css 类同名的链接，因此当单击链接时，jQuery 会隐藏中继器输出的所有没有匹配 id/类组合的 div。此外，在某些情况下，div 应用了多个类。

在我单击链接以过滤 div 的前 2 次左右一切正常，但随后它被挂断，变得无响应。

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();
        }
    });
});

并输出标记：

<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>

有什么办法可以提高效率吗？是这个问题吗？提前致谢！

4

3 回答 3

1

在性能方面，我很想缓存我的项目并基于此显示或隐藏

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

然后，您可以将过滤器放在关联数组中，以将 id 分配给正确的集合

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

点击代码将是：

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

这样做的好处是不必在每次点击时评估选择器。

现场示例：http: //jsfiddle.net/maZD7/

于 2012-08-06T16:05:43.140 回答
0

通过在 click 事件之外执行一次来减少创建 jQuery 集合的调用次数$('#divIssueMenu').children()，并在事件中引用该 var（下面块中的第一行）。

然后在单击事件中，不要打开所有组并有选择地关闭一些组，而是使用 jQuery 的 toggle() 函数来判断每个组是否应该出现：

var $allGroups = $('#divIssueMenu').children();

$(document).ready(function () {
    $('#filters a').click(function (e) {
        e.preventDefault();
        if (this.id == 'all') {
            $allGroups.show();
        }
        else {
            var filter = this.id;
            $allGroups.each(function(){
                $(this).toggle($(this).hasClass(filter));
            });
        }
    });
});
于 2012-08-06T16:15:29.700 回答
0

很难说到底是什么问题，所以正如其他人所做的那样，我可以指出看起来不太理想的事情。

我喜欢浮士德对效率和可读性的回答，但使用类来显示或隐藏会更快。因此，不要切换，而是添加一个类或删除它：

var $allGroups = $('#divIssueMenu').children();

$(document).ready(function () {
    $('#filters a').click(function (e) {
        e.preventDefault();
        if (this.id == 'all') {
            $allGroups.show();
        }
        else {
            $allGroups.removeClass('visible');
            var filter = this.id;
            $allGroups.hasClass(filter).addClass('visible');
        }
    });
});

...其中 css 看起来像这样：

#divIssue>div {display:none;}
#divIssue>div.visible {display:block;}
于 2012-08-06T17:19:50.770 回答