javascript - html 多级展开折叠对于多行表很慢

Question

html 表在树型 View 中具有 4 个层次结构。为了让用户能够控制展开/折叠到任意级别，使用以下函数。但这个函数在IE8上执行需要6秒多的时间。在 Chrome 中，这需要一半的时间。关于如何加快此功能的速度有什么建议吗？谢谢

function showDetailLevel(level) {
    /*hide all the tr*/
    $('.dataRow').each(function() {
        $(this).hide();
    });
    /*collapse all the carets*/
    $('.detailsCarat').each(function() {
        if ($(this).hasClass('ui-icon-triangle-1-s')) {
            $(this).removeClass('ui-icon-triangle-1-s').addClass('ui-icon-triangle-1-e');
        }                       
    }); 
    /*show the rows and expand all the carets that are at a tree level above the selected level*/
    for (var i=1; i<=level;i++) {   
        $('.detailLevel'+i).each(function() {
            $(this).show();
            if (i<level) {
                $(this).find('span.ui-icon-triangle-1-e').removeClass('ui-icon-triangle-1-e').addClass('ui-icon-triangle-1-s');
            }
        }); 
    }   
}

Answer 1

对于初学者，我会尝试以下操作:将父 div 添加到 #YOURCONTAINERDIV 所指出的那些类中。我还为您的添加/删除类添加了toggleClass。

我对这行代码很好奇:你能解释一下为什么要循环 level，然后通过 '.detailLevel' + i 的集合执行 .each 操作吗？我认为您的很多问题都在这里。

for (var i=1; i<=level;i++) { 
    $('.detailLevel'+i).each(function() {
        $(this).show();

<小时/>

 function showDetailLevel(level) {
      /*hide all the tr*/
         $('#YOURCONTAINERDIV .dataRow').each(function() {
         $(this).hide();
});
/*collapse all the carets*/
$('#YOURCONTAINERDIV.detailsCarat').each(function() {
    if ($(this).hasClass('ui-icon-triangle-1-s')) {
        $(this).removeClass('ui-icon-triangle-1-s').toggleClass( ui-icon-triangle-1-e, ui-icon-triangle-1-s );                    
}); 
/*show the rows and expand all the carets that are at a tree level above the selected level*/
for (var i=1; i<=level;i++) {
    // I suspect a big issue is here as you are looping, then looping again thru
    // a collection of elements. 
    $('.detailLevel'+i).each(function() {
        $(this).show();
        if (i<level) {
            $(this).find('span.ui-icon-triangle-1-e').toggleClass( ui-icon-triangle-1-e, ui-icon-triangle-1-s );
        }
    }); 
}   

}