Возможно оптимизация кода jQuery?

Question

Я использую jQuery для пользовательского стиля по умолчанию. Помимо скрытия и перекрытия с элементом div, я добавил функцию зависания. В основном это работает, хотя я еще не тестировал его во всех основных браузерах, и мне, вероятно, придется создать резерв для IE6 (который все еще использует его?).

Поскольку я всего лишь новичок, мне было интересно, можно ли каким-либо образом оптимизировать этот код. Благодаря!

$("select").each(function(){ 
    $(this).wrap('<div class="sbox"/>'); 
    $(this).after("<span class='sboxtext'></span><span class='sboxarrow'></span>"); 
    $(".sbox").hover(function (e) { 
    $(this).toggleClass('sbox-over'); 
    $(this).find("span.sboxarrow").toggleClass('sboxarrow-over'); 
    }); 
    var val = $(this).children("option:selected").text(); 
    $(this).next(".sboxtext").text(val); 
    $(this).change(function(){ 
    var val = $(this).children("option:selected").text(); 
    $(this).next(".sboxtext").text(val); 
    }); 
}); 

Answer 1

Нет необходимости использовать метод each, jQuery выполняет итерацию по выбранным элементам за кулисами. Если вы используете jQuery 1.9-, ваш код также работает в более старых версиях IE.

$("select").wrap('<div class="sbox"/>') 
      .after("<span class='sboxtext'></span><span class='sboxarrow'></span>") 
      .parent() 
      .hover(function() { 
       $(this).toggleClass('sbox-over') 
         .find(".sboxarrow") 
         .toggleClass('sboxarrow-over'); 
      }).end() 
      .change(function() { 
       var $this = $(this), 
        val = $this.children("option:selected").text(); 
       $this.next().text(val); 
      }).change(); 

• Cache объекты
• Используйте chainability, что JQuery предоставляет

Answer 2

Управление домом очень дорого в цикле, поэтому вы должны отсоединить элемент.

var selectbox = $("select").detach(); 

и выполнять операции над selectbox.