Optimize DOM selection in jQuery -

Optimize DOM selection in jQuery -

here commplete demo

i new javascript/jquery plugin.

how create jquery plugin next script , dom selection can more optimize.

var alternative = {"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 = $(this); settimeout(function() { it.parent().parent().parent() .find(".caption .right div").html(option[val]); },4000); });

first thing can cache selectors , utilize find() cut down selection range.

like so:

var uisettingspanel = $("#uisettingspanel"); var row = uisettingspanel.find('.sli .privacy .row'); var caption = row.find('.body .caption');

you should think of cleaver way cut down number , range of dom selections.

also avoid dom selections in event handlers each time (get elements once, cache them).

looking @ code think you'll able cut down .parent() calls.

jquery jquery-plugins jquery-selectors