1

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

这是开始时的 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 -->

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

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

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

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

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

4

1 回答 1

2

请改用此代码段：

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

  $('#test-link').click(function() {
    $(holder).each(function() {
      $(this).find('.clone').append(
        $(this).children('ul.articles').clone()
      );
    });
  });
});
于 2013-02-26T12:15:44.603 回答