使用jQuery生成按钮

是否有可能基于jQuery图像的数量创建一定数量的“按钮”？使用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）

来源

2010-08-20 Booski

这导致要在HTML获得？ – 2010-08-20 17:22:23

对不起，我应该把它放在那里。我现在编辑它。 – Booski 2010-08-20 17:27:48

你只是要求点击图片？意思是，点击example.png带你到另一个页面？ – Marc 2010-08-20 17:34:54

你想让你的按钮去哪里？如果你想为每个的另一件事情事情做的事情，你可以使用jQuery的。每（）方法是这样的：

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

这里有一个如何做到这一点的例子：http://jsfiddle.net/3HeFS/

来源

2010-08-20 17:20:34 treeface

你的意思是这样的：

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

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

，可随时更换$('body')上面的按钮添加其他地方也因为你没有提到要放置这些按钮。

来源

2010-08-20 17:21:42 Sarfraz

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

来源

2010-08-20 17:43:19

使用jQuery生成按钮

回答

相关问题