1

私はかなり単純なことをしようとしていますが、私は密集しています。.each()イベント(クリックとしましょう)で、 div .article-wrap.clone()ネストされた.articlesUL、およびdiv.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 に答える