问题:如何从列表中克隆每个图像并将其“粘贴”到另一个列表中?
我已搜索但未找到足够接近我的解决方案的任何解决方案。
简短说明:我正在创建一个带缩略图的幻灯片(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;
创建正确数量的li元素并设置正确的宽度和值:
// 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#thumbnails li a循环浏览每个幻灯片img并在此处打印。我怎么做到这一点? :)
</a></li>');
};
请在此处查看所有代码:http://jborg.se/dev/slippry/demo/test.html
现在“a”在每个a元素中,只是为了使它们可见。
编辑:
由于以下答案,使拇指宽度更有效。
这就是我想要通过上面的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>
答案 0 :(得分:1)
试试这个 -
// 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上。
答案 1 :(得分: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>