JavaScript的jquery方法

-4

我正在使用以下一些JQuery方法，並希望將它們轉換爲純JavaScript以提高網頁的性能。JavaScript的jquery方法

$(function() { 
    $('#resultDetails').on('click', '.toggle', function() { 
     var findChildren = function(tr) { 
      var depth = tr.data('depth'); 
      return tr.nextUntil($('tr').filter(function() { 
       return $(this).data('depth') <= depth; 
      })); 
     }; 
     var el = $(this); 
     var tr = el.closest('tr'); 
     var children = findChildren(tr); 
     var subnodes = children.filter('.expand'); 
     subnodes.each(function() { 
      var subnode = $(this); 
      var subnodeChildren = findChildren(subnode); 
      children = children.not(subnodeChildren); 
     }); 
     if(tr.hasClass('collapse')) { 
      tr.removeClass('collapse').addClass('expand'); 
      children.hide(); 
     } else { 
      tr.removeClass('expand').addClass('collapse'); 
      children.show(); 
     } 
     return children; 
    }); 
}); 
$(document).ready(function() { 
    $('table tr').on('click', function() { 
     $('#showContent').html($(this).find('.content').html()); 
    }); 
    $('table th').on('click', function() { 
     $('#showContent').html($(this).find('.content').html()); 
    }); 
    $('#resultDetails tbody tr').on('click', function(event) { 
     $(this).addClass('highlight').siblings().removeClass('highlight'); 
    }); 
});

演示可在http://jsfiddle.net/wYmwT/1/找到。如果表包含超過2000行，則需要大量時間才能加載。

任何幫助？

來源

2013-08-02 MIM

這不是一個編碼服務。你有什麼嘗試過自己？你卡在哪裏？你的具體**問題是什麼？ – NDM

你的問題不是來自jquery，而是來自你的表可以得到超過2000行。使用某種分頁，然後解決問題...順便說一句，你應該考慮委託事件，而不是爲每個元素創建一個處理程序。 –

-1代碼不可讀。我嘗試了無法讀取的代碼，在這裏，並在工作中... – Virus721

你的問題不是來自jquery，我建議你不要想一秒鐘重新寫你的代碼在JavaScript bc這將需要很長的時間，你也會發現最後一個代碼與千線你以後不能更新。我的解決方案是再次重新思考如何減少儘可能多的事情，你可以在桌子上。例如，你可以使用toggleClass（）在removeClass（'expand '）.addClass（'collapse'）等等等

來源

2013-08-02 09:28:32 Momo1987

我同意，findChildren函數看起來像$（tr）.find（'*'）的一些破碎的變體。重新實現jquery本身永遠不會是快速或可讀的。 – lossleader

感謝您的意見。我會研究這些建議。 – MIM

你可能不會看到一個巨大的差異，將其轉換爲純JavaScript。我確定像選擇器等常用的JQuery函數已經很好的優化了。你不太可能能夠比他們提供明顯的經驗水平更好地重寫它。

我會建議使用時間，而不是看看無限的網格或分頁解決方案，所以你沒有在一次處理儘可能多的DOM元素。也不要爲表單點擊事件創建匿名函數，因爲當它們全都做完全相同的事情時，它將爲每個元素創建一個新函數。相反，這樣做：

var clickFunction = function(event){...};

$('table tr').on('click', clickFunction);

希望有所幫助。

來源

2013-08-02 09:51:16 Samih

謝謝你的指導。現在我將專注於事件代表團。 – MIM

JavaScript的jquery方法

回答

相關問題