优化 jQuery 中的 DOM 选择答案

【问题标题】：Optimize DOM selection in jQuery优化 jQuery 中的 DOM 选择
【发布时间】：2014-08-12 14:33:18
【问题描述】：

这是一个完整的DEMO

我是 JavaScript/jQuery 插件的新手。

如何为以下脚本创建jQuery插件，DOM选择可以更加优化。

var option = {"N":"None","F":"Friends","FF":"Friends of Friends","E":"Everybody"}

$("#uiSettingsPanel").find(".head").click(function(){
    $("#uiSettingsPanel").find(".csli").slideUp();
    $(this).parent().find('.csli').slideDown("slow");   
});

$("#uiSettingsPanel .sli .privacy .row .caption").click(function(){
    $("#uiSettingsPanel .sli .privacy .row .caption")
              .parent().find(".body").slideUp("slow");

    $(this).parent().find(".body").toggle("slow");  
});

$("#uiSettingsPanel .sli .privacy .row .body select").change(function(){
    $(this).parent().parent().parent().find(".caption .right div")
         .html("<span class='wait'>Please wait...</span>");
        var val = $(this).val();

        var it = $(this);
        setTimeout(function() {
            it.parent().parent().parent()
                 .find(".caption .right div").html(option[val]);
        },4000);    
    });

【问题讨论】：

通过这个：lab.abhinayrathore.com/jquery-standards。优化代码的许多技巧。

标签： jquery jquery-plugins jquery-selectors

【解决方案1】：

首先你可以缓存选择器，然后使用 find() 来缩小选择范围。

像这样：

var uiSettingsPanel = $("#uiSettingsPanel");
var row = uiSettingsPanel.find('.sli .privacy .row');

var caption = row.find('.body .caption');

您应该想一些更巧妙的方法来减少 DOM 选择的数量和范围。

还要避免每次在事件处理程序中选择 DOM（获取元素一次，然后缓存它们）。

查看您的代码，我认为您将能够减少 .parent() 调用。

【讨论】：