Question

我正在写一个插件，用html / css替换原来用html / css制作的另一个插件，简言之，一个选择框。

我有性能问题，我承认我的代码相当沉重。首先，我获取每个选择的ID，然后在HTML代码后添加一些宽度，位置的css参数......

$(this).after("<div class="selectbox" s-id='"+$(this).attr("id")+"'> the code of the select </div>");

然后我隐藏了选择，这里出现了我觉得很重的部分，我采取了所有这些选项，我这样做

var selectbox=$("div[s-id="+selectID+"]"); //This is the div previously added after.

//each option of the select will be converted into a div
$.each($(this).find("option"), function(i) {
    var valor = $(this).val(),
        texto = $(this).text();

    if (i == 0) 
        selectbox.find(".class_valor").text(texto);//The first option to be shown

    //Then I add a li to my drop
    selectbox.find("ul").append('<li  data-value="'+valor+'">'+texto+'</li>');
});

好吧，现在，我不知道这是否是向触发器添加事件的最佳方式，该触发器打开下拉列表并单击选项，这不在selectbox函数内部，它位于{{{ 1}}

这是代码： http://codepen.io/anon/pen/kcpxl

Answer 1

小而简单的改进，缓存$（this）并最小化DOM操作

var selectbox=$("div[s-id="+selectID+"]"); //This is the div previously added after.

    //each option of the select will be converted into a div
    $.each($(this).find("option"), function(i) {
        var $this = $(this), 
            valor = $this.val(),
            texto = $this.text(), 
            liElems = '';

        if (i == 0) 
            selectbox.find(".class_valor").text(texto);//The first option to be shown

        //Then I add a li to my drop
        liElems += '<li  data-value="'+valor+'">'+texto+'</li>';
    });

    selectbox.find("ul").append(liElems);

提高jquery插件的性能

1 个答案: