jquery - 使用 jQuery 生成按钮

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 将用于浏览图像(即单击“按钮二”将显示 example-two.png)

Answer 1

您希望按钮放在哪里？如果你想对另一件事的每件事做某事，你可以使用 jQuery 的 .each() 方法，如下所示:

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

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