Javascript 转换.each（），因为它'；太慢了

我正在使用.each函数隐藏/显示表中的列。但问题是IE中的代码非常慢。在网上搜索后，我发现这可能是因为我的.each（）函数和$（this）

有关我为什么使用此代码的更多信息，您可以查看以下帖子：

这是我的旧代码： 将JQuery.min.js包含在第页

javascript:

$(function () {
    $('table th').each(function (_id, _value) {
    if(_id > 2){
        if($(this).find("a").text()){
            $('<span class="ShowHide"><div style="width:175px; display: inline-block;">- '+$(this).find("a").text()+'</div></span>').appendTo($("#togglers")).click(function (e) {
                $('table td:nth-of-type(' + parseInt(_id + 1) + '),table th:nth-of-type(' + parseInt(_id + 1) + ')').toggle();
                e.preventDefault();
            });
        }
        else{
            if($(this).find("div").text()){
                $('<span class="ShowHide"><div style="width:175px; display: inline-block;">- '+$(this).find("div").text()+'</div></span>').appendTo($("#togglers")).click(function (e) {
                $('table td:nth-of-type(' + parseInt(_id + 1) + '),table th:nth-of-type(' + parseInt(_id + 1) + ')').toggle();
                e.preventDefault();
                });
                }
            }
        }
    });

});

$（函数（）{
$（'table th'）。每个（函数（\u id，\u value）{
如果（_id>2）{
if（$（this.find（“a”）.text（））{
$（'-'+$（this）.find（“a”）.text（）+''）.appendTo（$（“#开关”））。单击（函数（e）{
$（'table td:n类型（'+parseInt（'u id+1）+'），table th:n类型（'+parseInt（'u id+1）+'））。toggle（）；
e、 预防默认值（）；
});
}
否则{
if（$（this.find（“div”）.text（））{
$（'-'+$（this.find（“div”）.text（）+''）.appendTo（$（“#开关”））。单击（函数（e）{
$（'table td:n类型（'+parseInt（'u id+1）+'），table th:n类型（'+parseInt（'u id+1）+'））。toggle（）；
e、 预防默认值（）；
});
}
}
}
});
});

HTML:

显示/隐藏列

我试图用这段代码转换javascript（源代码：），但我认为我的I（或_id）和_值仍然存在问题

$(function () {
var items = $('table th');
var $currentItem;

    for (var i = 0, j = items.length; i < j; i++) {
        $currentItem = $(items[i]); // in place of $(this)
        function (i, _value) {
            if(i > 2){
                if($currentItem.find("a").text()){
                    $('<span class="ShowHide"><div style="width:175px; display: inline-block;">- '+$currentItem.find("a").text()+'</div></span>').appendTo($("#togglers")).click(function (e) {
                        $('table td:nth-of-type(' + parseInt(i + 1) + '),table th:nth-of-type(' + parseInt(i + 1) + ')').toggle();
                        e.preventDefault();
                    });
                }
                else{
                    if($currentItem.find("div").text()){
                    $('<span class="ShowHide"><div style="width:175px; display: inline-block;">- '+$currentItem.find("div").text()+'</div></span>').appendTo($("#togglers")).click(function (e) {
                    $('table td:nth-of-type(' + parseInt(i + 1) + '),table th:nth-of-type(' + parseInt(i + 1) + ')').toggle();
                        e.preventDefault();
                    });
                    }
                }
            }
        }
    }
});

$（函数（）{
var项目=$（‘表th’）；
var$currentItem；
对于（变量i=0，j=items.length；i2）{
if（$currentItem.find（“a”）.text（））{
$（'-'+$currentItem.find（“a”）.text（）+''）.appendTo（$（“#开关”））。单击（函数（e）{
$（'table td:n类型（'+parseInt（i+1）+'），table th:n类型（'+parseInt（i+1）+'））。toggle（）；
e、 预防默认值（）；
});
}
否则{
if（$currentItem.find（“div”）.text（））{
$（'-'+$currentItem.find（“div”）.text（）+''）.appendTo（$（“#开关”））。单击（函数（e）{
$（'table td:n类型（'+parseInt（i+1）+'），table th:n类型（'+parseInt（i+1）+'））。toggle（）；
e、 预防默认值（）；
});
}
}
}
}
}
});

---

我可能需要使用其他代码。欢迎任何建议！Tnx.

性能问题与

无关。每个
。DOM比您选择的任何迭代集合的方法都慢几十倍

您可以让CSS为您执行切换，而不是在每个切换上迭代表

$（函数（）{
var-togglers=$（'#togglers'），//缓存toggler-ref
addToggler=函数（idx，文本）{
附加（“”+文本+“”）；
},
table=$（'#table'），//缓存表ref
列=0；
//为100列生成样式表：）
（函数生成器样式表（len）{
变量样式=[]，i=0；
对于（；i
之所以速度慢，是因为您的代码乱七八糟。例如，当您知道只需要第四个及以上元素时，为什么需要迭代？为什么要执行
parseInt（_id+1）
<代码>\u id
和
1
都是数字。你需要做的就是：
（\u id+1）
，括号只是防止变量连接到字符串本身，而不是添加在一起。查看其他帖子我为什么使用此代码。。。（）@endeka jQuery增加了一些开销。但真正的问题是你使用它的方式@YuryTarabanko最后一个问题：我想“分组”不同的列，例如，颜色和数字将是顶部的“更多信息”。所以你们可以在顶部看到“更多信息”，若你们点击它，列的颜色和编号是可见的。这可能吗？我正在尝试使用您的代码，但由于某些原因，我没有进入函数“table.find（'th'）。每个（函数（idx，header）”。尝试添加一些警报以查看我是否要进入每个函数…-在这里工作。如果您在其他地方尝试此代码，请确保确实有id为
table
：）的表，这就是问题所在。但我事先没有身份证。我知道该表是ID为ctl00\u MSO\u ContentDiv的div。我需要在+50页上使用此代码，并且在每一页上id都是不同的…@endeka好的，请使用找到您需要的表的任何选择器。您甚至可以通过将此代码泛化一点来制作插件。@endeka更详细的OOP示例，它允许您按名称隐藏列。
$(function () {
var items = $('table th');
var $currentItem;

    for (var i = 0, j = items.length; i < j; i++) {
        $currentItem = $(items[i]); // in place of $(this)
        function (i, _value) {
            if(i > 2){
                if($currentItem.find("a").text()){
                    $('<span class="ShowHide"><div style="width:175px; display: inline-block;">- '+$currentItem.find("a").text()+'</div></span>').appendTo($("#togglers")).click(function (e) {
                        $('table td:nth-of-type(' + parseInt(i + 1) + '),table th:nth-of-type(' + parseInt(i + 1) + ')').toggle();
                        e.preventDefault();
                    });
                }
                else{
                    if($currentItem.find("div").text()){
                    $('<span class="ShowHide"><div style="width:175px; display: inline-block;">- '+$currentItem.find("div").text()+'</div></span>').appendTo($("#togglers")).click(function (e) {
                    $('table td:nth-of-type(' + parseInt(i + 1) + '),table th:nth-of-type(' + parseInt(i + 1) + ')').toggle();
                        e.preventDefault();
                    });
                    }
                }
            }
        }
    }
});

$(function() {
    var togglers = $('#togglers'), //cache toggler ref
        addToggler = function(idx, text) {
            togglers.append('<span class="toggler" data-id="' 
                              + idx + '">' + text + '</span>');    
        },
        table = $('#table'), //cache table ref
        columns = 0;

    //generate styles for 100 columns table :)
    (function generateStyleSheet(len){
        var styles = [], i = 0;

        for(; i < len; i++) {
            styles.push('.hide-' + i + ' .column-' + i + ' {display: none;}') ;
        }

        $('<style>' + styles.join('\n') + '</style>').appendTo(document.body);
    }(100)) 

    //bind on click once using event delegation
    togglers.on('click', '.toggler', function(e){
        var id = $(e.target).toggleClass('pressed').data('id');
        table.toggleClass('hide-' + id);
    }); 

    //generate all togglers and count em
    table.find('th').each(function(idx, header){ 
        header = $(header);
        addToggler(idx, header.text()); //make toggler
        header.addClass('column-' + idx); //add class column-i
        columns++;
    });

    //add column-i class to tds
    table.find('td').each(function(idx, td) { 
        $(td).addClass('column-' + (idx%columns));
    });

});