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

我正在使用.text的{{1}}属性直接保存几个CPU周期，如果您因某种原因需要对内容进行编码，请将其反转。

或者使用.delegate()更高效的版本只能将这些<option>和mouseneter事件绑定一次：

mouseleave

You can give it a try here

Answer 2

由于您在第二个版本中做得少，我会说第二个版本会更有效率。

虽然我认为您需要.clone() item以确保您使用的是新副本。

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

最后，将.appendTo()附加到.append()后，您可以使用list代替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); });。

{{1}}

jquery重复元素创建

2 个答案: