Question

我正在尝试在for循环内的div中添加多个div：

  for( i=0; i<10; i++ )
  {
      $('#parent').append('<div class="child"></div>");
  }

这很有效，但是当我这样做时：

  for( i=0; i<10; i++ )
  {
      var child = $('<div/>', { class: 'child' });
      $("#parent").append(child);
  }

我得到了非常奇怪的结果，我相信这是因为使用第二种方法，传递而不是对象本身的引用。我怎样才能将纯对象，无引用传递给append方法？谢谢！

Answer 1

使用jQuery cloning

$("#parent").append(child.clone());

您反复追加同一个对象，所以没有任何反应。它只是把元素拿回来放在同一个地方。

克隆确保它是一个新的对象，它是原始文件的副本。

超出上述链接：

考虑以下HTML：
<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>
...   鉴于代码：

$( ".hello" ).appendTo( ".goodbye" );

生成的DOM结构   将是：
<div class="container">
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>
为了防止这种情况而是创建元素的副本，您可以编写以下内容：

$( ".hello" ).clone().appendTo( ".goodbye" );

这会产生：
<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

附加对象而不是引用

1 个答案: