可能的jQuery代碼優化？

我正在使用jQuery自定義樣式默認選擇框。除了隱藏它並覆蓋div元素外，我還添加了懸停功能。基本上它可以工作，儘管我還沒有在所有主流瀏覽器上測試它，並且我可能不得不爲IE6構建一個後備（還在使用它？）。可能的jQuery代碼優化？

由於我只是一個初學者，我想知道這個代碼是否可以用任何方式進行優化。謝謝！

$("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); 
    }); 
});

來源

2013-07-01 user2538525

有沒有必要使用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();

緩存中的對象
使用jQuery提供

來源

2013-07-01 10:39:16 undefined

這正是我正在尋找的。非常感謝！沒有投票的聲望，但是在我的書中+10是值得的:) – user2538525

dom操作在循環中非常昂貴，因此您必須分離元素。

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

並在選擇框上執行操作。

來源

2013-07-01 10:38:41

謝謝你的指針chainability，我將需要潛入這一點。「detach（）」已被添加書籤。 – user2538525

可能的jQuery代碼優化？

回答

相關問題