克隆图像转换成一个DIV与类名

我这里有一个的jsfiddle - http://jsfiddle.net/drRG9/克隆图像转换成一个DIV与类名

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

它是由两个div的（黄色）用相同的类名称“文章”。

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

第一张div包含我想克隆到IT的图像列表的所有图像格

所以图像应复制到第一红色边框的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>

来源

2013-03-19 ttmt

试试这个：

$('.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-19 11:04:22 pktangyue

的第二个div可能有影像。对不起，我应该更好地解释，这将在这种情况下工作，但这是简化的演示。我需要将图像克隆到其父图像div中。 – ttmt 2013-03-19 11:13:30

@ user668499我更新了我的帖子，请检查。 – pktangyue 2013-03-19 11:20:12

这几乎就要离开了，但它把图像放在div之外我需要它们，我认为这样做会起作用，但它会影响它的效果，但是它会影响到最近的图像（'.text ul'）。 – ttmt 2013-03-19 11:36:35

克隆图像转换成一个DIV与类名

回答

相关问题