Question

以下是完整的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);    
    });

Answer 1

首先，您可以缓存选择器，然后使用find（）来减少选择范围。

像这样：

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

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

您应该考虑采用一种切割方法来减少DOM选择的数量和范围。

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

查看您的代码，我认为您可以减少.parent（）调用。

在jQuery中优化DOM选择

1 个答案: