[Javascript] jQuery选择器性能下降


Answers

包括jQuery.ui.css使得重新显示速度非常慢。 昂贵的css规则导致显示器死亡,渲染速度变慢。 这个问题的评论是“向正确的方向推进”。

Question

我以超过600个MVC格式(php Codeigniter)的形式呈现。 这些表单中的每一个都有一个标有“更多选项”的按钮。 当你点击这个按钮 - 一个隐藏的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");
    });
});

这里是结构(这些div有650个,还有更多)

<div>
    <li id="bCIya8DZyr4idseJe5cbLA" class="even">
        <form action="url" method="post" accept-charset="utf-8">
            <div class="space_name"></div>
            <button name="more_data" type="button" class="meta_button">More Options</button>
            <input type="submit" name="Submit" value="Submit">
            <div class="meta" style="overflow: hidden; display: block;">
                <div class="meta_block">Set Estimates:
                    <div class="input_estimate">1:
                        <input type="number" name="estimate_1" value="" id="estimate_1" class="estimate">
                    </div>
                    <div class="input_estimate">2:
                        <input type="number" name="estimate_2" value="" id="estimate_2" class="estimate">
                    </div>
                    <div class="input_estimate">3:
                        <input type="number" name="estimate_3" value="" id="estimate_3" class="estimate">
                    </div>
                </div>
            </div>
        </form>
    </li>
</div>

注意:我正在运行jQuery 1.7.2