将图像克隆到一个具有类名的 div 中答案

【问题标题】：Clone images into one div with class name将图像克隆到一个具有类名的 div 中
【发布时间】：2013-03-19 11:00:51
【问题描述】：

我在这里有一个 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>

【问题讨论】：

标签： class clone

【解决方案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 也可能有图像。抱歉，我应该解释得更好，这在这种情况下会起作用，但这是简化的演示。我需要将图像克隆到其父级中的图像 div。
这几乎要离开了，但它把图像放在了我需要它们的 div 之外，我认为这会起作用，但它不会 - var closeest = $('.text ul').closest(' .images');
@user668499 请再检查一遍，我之前错过了一些东西。
说得太早了，如果我在另一篇文章 div 中添加图像，这些图像将添加到两个图像 div ttmt.org.uk/forum/clone 我需要红色汽车在顶部 div 和绿色在底部。只需将“this”文章中的图片移动到“this”图片 div 中即可。