0

私はここにjsfiddleを持っています - http://jsfiddle.net/drRG9/

ここのライブデモ - http://www.ttmt.org.uk/forum/clone/

それは、同じクラス名「article」を持つ 2 つの div (黄色) です。

各黄色の div には、クラス名が「images」の div (赤い境界線) が含まれています。

最初の黄色の div には、IT の画像 div に複製したい画像のリストが含まれています

したがって、画像は一番下ではなく、最初の赤い枠の div に複製する必要があります。

では、クラス名を持つ 1 つの div だけに画像を複製するにはどうすればよいでしょうか。

それが理にかなっていることを願っています。

    <!DOCTYPE html>
    <html>
      <meta charset="UTF-8">
      <title>Title of the document</title>
      <meta name="description" content="">
      <meta name="keywords" content="">
      <meta name="robots" content="">

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>


      <style type="text/css">
        *{
          margin:0;
          padding:0;
        }
        html,body{
          height:100%;
          background:#ddd;
        }
        #wrapper{
          min-height:100%;
          max-width:800px;
          margin:0 auto;
          background:#fff;
          margin-top:-20px;
          padding-top:40px;
        }
        .article{
          background:yellow;
          margin:20px;
        }
        ul{
          list-style:none;
          margin:10px;
        }
        ul li{
          display:inline-block;
        }
        .images{
          min-height:20px;
          border: 1px solid red;
        }
      </style>

      </head>

    <body>

      <div id="wrapper">
        <div class="article">

          <div class="text">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
            </p>
            <ul>
              <li><img src="images/red01.jpg" /></li>
              <li><img src="images/red02.jpg" /></li>
              <li><img src="images/red03.jpg" /></li>
              <li><img src="images/red04.jpg" /></li>
            </ul>
          </div><!-- .text -->
          <div class="images">

          </div><!-- .images -->

        </div><!-- .article -->



        <div class="article">

          <div class="text">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
            </p>
          </div><!-- .text -->
          <div class="images">

          </div><!-- .images -->

        </div><!-- .article -->


      </div>  

      <script>

        $(function(){

          $('.text ul').clone().appendTo('.article .images', this);

        })

      </script>  

    </body>

    </html>
4

1 に答える 1

2

これを試して：

$('.text ul').clone().appendTo('.article:first .images', this);

これは最初のにのみ複製され.articleます。

あなたのコメントとして、あなたはこれを試すことができます：

var closest = $('.text ul').closest('.article');
$('.text ul').clone().appendTo(closest.find('.images'));

あなたはより多くの情報のために見ることができます.closest()。

アップデート

複数あるので<ul>、このコードをでラップする必要があります.each()。

このコードを試してください：

$('.text ul').each(function(){
  var closest = $(this).closest('.article');
  $(this).clone().appendTo(closest.find('.images'));
});
于 2013-03-19T11:04:22.480 に答える