Javascript jQuery选择器的性能较慢

我正在以MVC格式（php Codeigniter）呈现600多个表单。这些表单中的每一个都有一个标记为“更多选项”的按钮。单击此按钮时，将切换位于同一父元素中的隐藏div，显示更多输入字段和数据。问题是，同级切换在控制台中很快，但当我单击实际按钮时，触发需要很长时间

使用id是推荐的修复方法，但是当我有这么多div元素要处理时，它有点不切实际

这是我的js文件

jQuery(document.ready(function(){
    jQuery("form >button[name='more_data'].meta_button").click( function(){  
        jQuery(this).siblings("div.meta").toggle("fast");
    });
});

结构如下（这些部门有650个，还有更多）

更多选择
设定估计值：
1:
2:
三：

注意：我正在运行jQuery 1.7.2，请不要使用委托 当您有多个事件侦听器时，使用@jrummell之类的委托（

.on（）

和选择器）会更快，因为您会将侦听器的数量减少到一个

使用类的更简单的选择器 因此，在这种情况下，我建议使用更简单的选择器：

$(function(){
    $('.meta_button').on('click', function(){
        $(this).siblings('div.meta').toggle('fast');
    });
});

这样，在触发单击时，选择器变得非常简单，检查也更少，因为没有委托。此外，表单中其他元素上的单击也不会被捕获

动画会减慢速度 动画可以使事情变慢。在多个元素上同时执行甚至更多的动画

尝试在单个父元素中移动所有

div.meta

元素，并仅在该单个元素上应用动画

您也可以通过使用

toggle（）

完全删除动画（在本例中，有关多个项目的注释仍然有效）

示例：

$(function(){
    $('.meta_button').on('click', function(){
        $(this).parent().find('.meta_holder').toggle();
        // OR
        // $(this).next('.meta_holder').toggle();
    });
});

---

包括jQuery.ui.css使重新显示速度非常慢。昂贵的css规则扼杀了显示并降低了渲染时间。“向正确方向轻推”在问题的注释中。

您可以尝试使用

.nextAll（）

而不是

.sides（）

。为什么有这么多表单？如果适用，请将“div.meta”更改为“.meta”。您在控制台中使用的是什么快速代码？您确定没有呈现问题吗？像复杂的回流焊和昂贵的CSS规则？根据我的经验，我们看到的代码看起来相当快；如果你真的不需要它，我会删除它，然后按类选择。这确实稍微加快了渲染速度。毫秒被剃掉。@Fuhton渲染是一个完全不同的世界。您询问了jQuery选择器的速度等问题。您使用的是什么浏览器？呈现内容在特定浏览器中可能很慢，而在其他浏览器中可能很快如果有一个包含所有元按钮的ID，您应该将其添加到选择器$（'#containerID'）。查找（'button.meta_button'）。在（…）上比只$（'.meta_button'）更快。这解决了您的问题，但并没有回答您的问题。这应该是对IMHO问题的评论，问题是为什么jQuery需要这么长时间才能触发。答案是因为代价高昂的css规则。

$(function(){
    $('.meta_button').on('click', function(){
        $(this).parent().find('.meta_holder').toggle();
        // OR
        // $(this).next('.meta_holder').toggle();
    });
});