0

我在这里有一个 jsfiddle - http://jsfiddle.net/drRG9/

并在这里进行现场演示 - http://www.ttmt.org.uk/forum/clone/

这是两个具有相同类名“article”的div（黄色）。

每个黄色 div 包含一个类名为“images”（红色边框）的 div。

第一个黄色 div 包含我想克隆到它的图像 div 的图像列表

所以图像应该被克隆到第一个红色边框的 div 而不是底部的。

那么如何将图像克隆到具有类名的一个 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 回答