代码之家 › 专栏 › 技术社区 › Hailwood

jquery重复元素创建

jquery

Hailwood · 技术社区 · 15 年前

以下哪一项更好?
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);
});

.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;
};

2 回复 | 直到 15 年前

Nick Craver 15 年前

将更好,但它目前有不同的效果(元素移动每次)。

一次一次地创造它 .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 财产 <option> 如果出于某种原因需要对内容进行编码,也可以直接节省一些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 .

user113716 15 年前

由于你在第二个版本中做的更少,我可以说第二个版本会更有效率。

尽管我觉得你需要 .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);  
});