-5

我正在使用以下一些 JQuery 方法，并希望将它们转换为纯 JavaScript 以提高网页的性能。

$(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 行，则加载需要大量时间。

有什么帮助吗？

4

2 回答 2

2

您的问题不是来自 jquery，我建议您不要想一秒钟再用 Javascript bc 重新编写您的代码，这将花费您很长时间，而且您最终会发现一个包含数千行代码的代码您以后无法更新。我的解决方案是重新考虑如何尽可能减少 Table 上的事件。例如，您可以使用 toggleClass() 代替 removeClass('expand').addClass ('collapse') 等等

于 2013-08-02T09:28:32.610 回答
0

您可能不会看到将其转换为纯 javascript 的巨大差异。我确信常见的 JQuery 函数（如选择器等）已经得到了很好的优化。你不可能比他们给你明显的经验水平更好地重写这个。

我建议使用时间来查看无限网格或分页解决方案，这样您就不会一次处理那么多 DOM 元素。也不要为表格点击事件创建匿名函数，因为当它们都在做完全相同的事情时，它将为每个元素创建一个新函数。相反，请执行以下操作：

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

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

希望有帮助。

于 2013-08-02T09:51:16.617 回答