使用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生成按鈕

回答

相關問題