Question

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

在前两次左右点击一个链接过滤div时，一切正常，但随后它会挂起，变得无法响应。

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>

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

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

Answer 2

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

然后在click事件中，不要打开 all 组并选择性地关闭一些组，而是使用jQuery的toggle（）函数，条件是每个组是否应该出现：< / p>

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

Answer 3

很难说这个问题究竟是什么，所以正如其他人所做的那样，我可以指出看似不太理想的事情。

我喜欢Faust对效率和可读性的回答，但它是quicker to use a class to show or hide。因此，不是切换，而是添加一个类或删除它：

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

如何使用jQuery按类正确过滤div？

3 个答案: