jquery重複元素創建

Question

以下哪個更好？
1）在每次循環

$(obj).children('option').each(function(){ 
    var item = $('<div />') 
    .html($(this).text()) 
    .append(plus) 
    .addClass('ui-widget-content ui-state-default') 
    .hover(
     function(){$(this).addClass('ui-state-hover')}, 
     function(){$(this).removeClass('ui-state-hover');} 
    ); 
    $(list).append(item); 
}); 

---

2）創建的元素創建的元素，只有改變它的HTML在每次循環
注：這是不行的，它需要.clone()如下。

var item = $('<div />') 
    .addClass('ui-widget-content ui-state-default') 
    .hover(
    function(){$(this).addClass('ui-state-hover')}, 
    function(){$(this).removeClass('ui-state-hover');}); 

$(obj).children('option').each(function(){ 
    $(item).html($(this).text()).append(plus); 
    $(list).append(item); 
}); 

---

更新：
因此，審查所有問題的答案之後，/在這裏評論是最後的功能。 還有什麼改進？

function create_list(obj) { 
    var list = $('<div />') 
    .attr('id','keyword_unselect').addClass('ui-widget') 
    .delegate("div", "mouseenter mouseleave", function() { 
     $(this).toggleClass('ui-state-hover'); 
    }); 

    var plus = $('<div />').addClass('ui-icon-plus'); 

    var item = $('<div />') 
    .append(plus) 
    .addClass('ui-widget-content ui-state-default'); 

    $(obj).children('option').each(function(){  
    item.clone(true) 
     .prepend(this.text) 
     .appendTo(list); 
    }); 
    return list; 
}; 

Answer 1

在這種情況下，第一，雖然第二將更好，但它目前具有不同的效果（每次元件移動）。

進行追加，這樣創建一次，.clone()它：

var item = $('<div />', { 'class': 'ui-widget-content ui-state-default' }) 
        .hover(function(){$(this).addClass('ui-state-hover')}, 
         function(){$(this).removeClass('ui-state-hover');}); 

$(obj).children('option').each(function(){ 
    $(list).append(item.clone(true).html(this.text).append(plus)); 
}); 

You can give it a try here。

我直接使用<option>的.text屬性也可以節省幾個CPU週期，如果出於某種原因需要對內容進行編碼，請將其反轉。

---

還是有點用.delegate()只有結合這些mouseneter和mouseleave事件也更高效的版本：

$(list).delegate("div", "mouseenter mouseleave", function() { 
    $(this).toggleClass('ui-state-hover'); 
}); 

var item = $('<div />', { 'class': 'ui-widget-content ui-state-default' });  
$(obj).children('option').each(function(){ 
    $(list).append(item.clone().html(this.text).append(plus)); 
}); 

You can give it a try here。

Answer 2

由於您在第二個版本中做得更少，所以我可以說第二個版本更高效。

雖然我認爲您將需要.clone()item以確保您正在使用新副本。

此外，您可以將plus添加到原始文本，然後.prepend()文本。

最後，在追加到list時，您可以使用.appendTo()而不是.append()。

var item = $('<div />') 
    .addClass('ui-widget-content ui-state-default') 
    .append(plus) 
    .hover(
    function(){$(this).addClass('ui-state-hover')}, 
    function(){$(this).removeClass('ui-state-hover');}); 

$(obj).children('option').each(function(){ 
    item.clone(true) 
     .prepend($.text([this])) 
     .appendTo(list); 
});