Question

Im writting a plugin to replace the original with another made by me with html/css, in a few words, a selectbox.

I have problems of perfomance and I acknowledge my code it’s fairly heavy.
At first, I take the ID of each select and I add after an HTML code with some css params of the as width, position…

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

Then I hide the select, and here comes the part I think is quite heavy, I take all options of this and I do this

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>');
});

And well, now, I don’t know if this is the best way to add events to the trigger that opens the dropdown and the click to an option, this is not inside the selectbox function, it’s outside inside the (function($){

Here is the code:
http://codepen.io/anon/pen/kcpxl

Answer 1

Small and easy improvements, cache $(this) and minimize DOM manipulation

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);