Question

是否可以根据jQuery的图像数量创建一定数量的“按钮”？

示例：

<ul class="gallery">
    <li><img src="example-one.png" /></li>
    <li><img src="example-two.png" /></li>
    <li><img src="example-three.png" /></li>
</ul>

有没有办法创建三个导航按钮而不添加任何更多的HTML？我通常做网站的编程结束而不是javascript - jQuery对我来说还是新手。

我知道：

var imageCount = jQuery('.gallery li').length;

会给我一些图像，但我迷失了去哪里。

修改

我想要实现的输出类似于：

<ul class="gallery">
    <li><img src="example-one.png" /></li>
    <li><img src="example-two.png" /></li>
    <li><img src="example-three.png" /></li>
</ul>
// Added with jQuery
<ul class="gallery-nav">
    <li><a href="#">Button One</a></li>
    <li><a href="#">Button Two</a></li>
    <li><a href="#">Button Three</a></li>
</ul>

因此.gallery-nav将用于浏览图像（即单击“Button Two”将显示example-two.png）

Answer 1

您希望按钮在哪里？如果你想为其他东西做些什么，你可以像这样使用jQuery的.each（）方法：

$('.gallery img').each(function() {
    alert("This is image " + $(this).attr('src'));
});

以下是如何执行此操作的示例：http://jsfiddle.net/3HeFS/

Answer 2

你的意思是：

var imageCount = jQuery('.gallery li').length;

for(var i=0; i<imageCount; i++){
 $('button').appendTo($('body'));
}

您可以替换上面的$('body')以将按钮附加到其他位置，因为您没有提到要放置这些按钮的位置。

Answer 3

var names = ['One', 'Two', 'Three'];
$('.gallery li').each(function(i, el) {

    var oldHtml = $(this).html();
    $(this).empty().html('<a href="#">Button '+names[i]+'</a>');


});

example

使用jQuery生成按钮

3 个答案: