javascript - 转换 .each() 因为它很慢

Question

我正在使用 .each 函数来隐藏/显示表的列。但问题是该代码在IE中运行速度非常慢。在互联网上搜索后，我发现这可能是因为我的 .each() 函数和 $(this)。

有关我使用此代码的更多信息，您可以查看这篇文章:Hide/show column

这是我的旧代码: 在页面上包含 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();
                });
                }
            }
        }
    });

});

HTML:

<div id="togglers">Show/Hide columns<br/></div>

我尝试使用此代码转换我的 javascript(来源:jQuery very slow in IE)，但我认为我的 i(或 _id)和 _value 仍然存在问题...

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

我可能需要使用其他代码。欢迎任何建议!交易。

Answer 1

性能问题与.each无关。 DOM 比您选择的任何迭代集合的方式慢数十倍。

您可以让 CSS 为您做这件事，而不是在每个切换上迭代表格。 Demo .

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

});