克隆圖像轉換成一個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與類名

回答

相關問題