转换.each()，因为它'

Convert .each() because it's slow

本文关键字：因为 each 转换更新时间：2023-09-26

我使用。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();
                });
                }
            }
        }
    });
});

HTML:

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

我试图转换我的javascript与此代码(来源:jQuery非常慢在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();
                    });
                    }
                }
            }
        }
    }
});

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

性能问题与.each无关。DOM比你选择的任何迭代集合的方法都要慢几十倍。

你可以让CSS为你做，而不是在每个开关上迭代表。演示。

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