Question

我正在尝试做一些相当简单的事情，但我很紧张。在一个事件上（比如说点击一下）我想要.each() div .article-wrap，.clone()嵌套.articles UL和.apend输出.clone div。

以下是HTML的开始：

<div class="article-wrap">
 <h3>Some heading</h3>
 <ul class="articles">
   <li> <a href="#">Sample title number 01</a> </li>
   <li> <a href="#">Sample title number 02</a> </li>
   <li> <a href="#">Sample title number 03</a> </li>
 </ul>
 <div class="clone"> </div> 
</div>  <!-- End .article-wrap -->

<div class="article-wrap">
 <h3>Some heading</h3>
 <ul class="articles">
   <li> <a href="#">Sample title number 04</a> </li>
   <li> <a href="#">Sample title number 05</a> </li>
   <li> <a href="#">Sample title number 06</a> </li>
 </ul>
 <div class="clone"> </div>
</div>  <!-- End .article-wrap -->

这是我要找的结果：

<div class="article-wrap">
 <h3>Some heading</h3>
 <ul class="articles">
   <li> <a href="#">Sample title number 01</a> </li>
   <li> <a href="#">Sample title number 02</a> </li>
   <li> <a href="#">Sample title number 03</a> </li>
 </ul>
 <div class="clone">
   <ul class="articles">
     <li> <a href="#">Sample title number 01</a> </li>
     <li> <a href="#">Sample title number 02</a> </li>
     <li> <a href="#">Sample title number 03</a> </li>
    </ul>
 </div>  <!-- End .clone -->
</div>  <!-- End .article-wrap -->

<div class="article-wrap">
 <h3>Some heading</h3>
 <ul class="articles">
   <li> <a href="#">Sample title number 04</a> </li>
   <li> <a href="#">Sample title number 05</a> </li>
   <li> <a href="#">Sample title number 06</a> </li>
 </ul>
 <div class="clone">
   <ul class="articles">
     <li> <a href="#">Sample title number 04</a> </li>
     <li> <a href="#">Sample title number 05</a> </li>
     <li> <a href="#">Sample title number 06</a> </li>
   </ul>
 </div>  <!-- End .clone -->
</div>  <!-- End .article-wrap -->

目前我正在运行一个简单的脚本，但是它将两个克隆列表添加到每个.clone div。 这是我的JS：

$(function() {
  var holder = '.article-wrap';

  $('#test-link').click(function() {
    $(holder).each(function() {
      $('.clone').append(
        $(this).children('ul.articles').clone()
      );
    });
  });
});

我找不到如何确保我只在.article-wrap div的每次迭代中输出克隆内容。目前，我正在获取所有克隆的项目，您可以看到她：http://jsfiddle.net/EGvMm/2/

我已经阅读了一些关于类似主题的其他帖子，他们建议删除类名，但如果可能的话，我不希望这样做。请指教！

Answer 1

请改用此代码段：

$(function() {
  var holder = '.article-wrap';

  $('#test-link').click(function() {
    $(holder).each(function() {
      $(this).find('.clone').append(
        $(this).children('ul.articles').clone()
      );
    });
  });
});

jQuery clone（）多个列表并将每个列表附加到其原始列表

1 个答案: