优化 jQuery 中的 DOM 选择

Posted 2023-05-09

【中文标题】优化 jQuery 中的 DOM 选择

【英文标题】：Optimize DOM selection in jQuery

【发布时间】：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。优化代码的许多技巧。

【参考方案1】：

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

像这样：

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

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

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

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

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