Question

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

现场演示 - http://www.ttmt.org.uk/forum/clone/

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

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

第一个黄色div包含我想要克隆到IT'S images 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>

Answer 1

试试这个：

$('.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'));
});

使用类名将图像克隆到一个div中

1 个答案: