克隆每個，附加到每個

Question

問題：如何克隆列表中的每個圖像並將它們「粘貼」到另一個列表中？

我已經搜索，但沒有找到任何解決方案足夠接近我的解決方案。

簡短說明：我正在創建一個帶縮略圖的幻燈片（jQuery-library：Slippry Slider）。我希望縮略圖能夠動態工作，具體取決於幻燈片的數量。

所以首先我有一個包含一些HTML的幻燈片：

<ul id="thumbnails"> 
<li> 
    <a href="#slide1"> 
     <img src="img/image-1.jpg" alt="This is caption 1"> 
    </a> 
</li> 
<li> 
    <a href="#slide2"> 
     <img src="img/image-2.jpg" alt="This is caption 2"> 
    </a> 
</li> 
<li> 
    <a href="#slide3"> 
     <img src="img/image-4.jpg" alt="And this is some very long caption for slide 4."> 
    </a> 
</li> 

現在我想創建包裹元素爲我的縮略圖，首先div然後ul - 元素：

// Create thumb-wrapping-elements 
$('.demo_wrapper').append('<div class="thumb-box"></div>'); 
$('.thumb-box').append('<ul class="thumbs"></ul>'); 

我想檢查上面的HTML中有多少張幻燈片：

// How many thumbs? Check how many slides there is. 
var count = $("#thumbnails li").length; 

創建鋰元素的正確的數字並設置正確的寬度和值：

// Loop through and create li-elements and links 
for (var thumbcounter = 0; thumbcounter < count; thumbcounter++) { 

// Whats the width of each thumb? 
var thumbwidth = (100/count) + '%'; 

thumburl = thumbcounter + 1; 
$('.thumbs').append('<li><a href="#' + thumburl + '" data-slide="' + thumburl + '" style="width:' + thumbwidth + ';"> 

在這裏，我想通過從UL＃縮略圖立一個以上的每張幻燈片IMG環和這裏打印出來。我該怎麼做？ :)

</a></li>'); 
}; 

在這裏看到的所有代碼：http://jborg.se/dev/slippry/demo/test.html

現在，「一」是每一個元素裏面，只是爲了讓它們可見。

編輯：拇指更有效，感謝

製造寬度以下回答。

這就是我想通過jQuery的環以上（現在我所擁有的一切權利，除了圖像 - 我不知道如何從HTML和印刷複製在這裏，因爲每個縮略圖）輸出：

<div class="thumb-box"> 
      <ul class="thumbs"> 
       <li> 
        <a href="#1" data-slide="1"> 
         <img src="img/image-1.jpg" alt="This is caption 1"> 
        </a> 
       </li> 
       <li> 
        <a href="#2" data-slide="2"> 
         <img src="img/image-2.jpg" alt="This is caption 2"> 
        </a> 
       </li> 
       <li> 
        <a href="#4" data-slide="3"> 
         <img src="img/image-4.jpg" alt="And this is some very long caption for slide 4."> 
        </a> 
       </li> 
      </ul> 
     </div> 

Answer 1

這樣的事情？

$(document).ready(function() { 
 
    var html = '<div class="thumb-box"><ul class="thumbs"></ul></div>'; 
 
    $('.demo').append(html);  
 

 
    var count = $("#thumbnails li").length; 
 
    var width = (100.00/count) + '%'; 
 
    var counter = 0; 
 
    $('#thumbnails li').each(function() { 
 
     counter++; 
 
     var newItem = '<li>'; 
 
     newItem += '<a href= "' + $(this).find('a').attr('href') + '" '; 
 
     newItem += 'data-slide="' + counter + '">'; 
 
     newItem += '<img src="' + $(this).find('img').attr('src') + '" alt="' + $(this).find('img').attr('alt') + '"/>'; 
 
     newItem += '</a></li>'; 
 
      
 
     $('ul.thumbs').append(newItem); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
ORIGINAL<br/> 
 
<ul id="thumbnails"> 
 
    <li> 
 
     <a href="#1" data-slide="1"> 
 
      <img src="img/image-1.jpg" alt="This is caption 1"/> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="#2" data-slide="2"> 
 
      <img src="img/image-2.jpg" alt="This is caption 2"/> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="#4" data-slide="3"> 
 
      <img src="img/image-4.jpg" alt="And this is some very long caption for slide 4."/> 
 
     </a> 
 
    </li> 
 
</ul> 
 
<br/> 
 
DEMO 
 
<div class="demo"> 
 
</div>

Answer 2

嘗試這個 -

// exported and edited the thumbwidth var for efficiency 
var thumbwidth = (100/count) + '%'; 

// Loop through and create li-elements and links 
for (var x = 0; x < count; x++) {  
    var imgEl = $('#thumbnails').find('img').eq(x).prop('outerHTML'); 
    $('.thumbs').append('<li><a href=\"#' + (x+1) + '\" data-slide=\"' + (x+1) + '\" style=\"width:' + thumbwidth + ';\">'+ imgEl + '</a></li>'); 
} 

希望它能幫助。 PS-對不起，沒有任何解釋和混亂，我在iPad上。