jquery append'x'number圖像元素應用'x'到src和類

我有一個包含590張圖片的目錄，我的問題是能夠使用jquery從該目錄中單獨拉出圖像並追加它們，不能單獨使用jquery/javascript來完成。或者我已將圖片更名爲1.jpg，2.jpg ... 590.jpg。如何使用jquery可以我590倍的圖像附加到一個div離開我在所附元件的數量施加到src是'lq'+numberofappended+'.jpg'和class是'image-'+numberofappendedjquery append'x'number圖像元素應用'x'到src和類

結果離開我與下面

<div class="imagecontainer"> 
<img src="lq/1.jpg" class="image-1"/> 
<img src="lq/2.jpg" class="image-2"/> 
<img src="lq/3.jpg" class="image-3"/> 
... 
<img src="lq/590.jpg" class="image-590"/> 
</div>

如果我所擁有的內容太廣泛了，我可以一次追加50張圖片，並在每次到達頁面末尾時應用jquery分頁加載另外50張圖片。

我個人知道如何在jQuery中使用append，但我不知道如何單獨附加圖片，並根據哪個附加數字將其應用於src和class。

來源

2012-06-18 Yusaf Khaliq

在這裏你去;將圖像存儲在數組中，加入它們並一次追加。

var images = []; 

for (var i = 1; i <= 50; i++) { 
    images.push('<img src="lq/'+i+'.jpg" class="image-'+i+'"/>'); 
} 

$('.imagecontainer').append(images.join('\n'));

來源

2012-06-18 21:08:32 Mathletics

一個for循環應該做的伎倆，

var images = ""; 
for (var i = 1; i <= 5; i++) { 
    images += '<img src="lq/'+i+'.jpg" class="image-'+i+'"/>' 
} 

$('.imagecontainer').append(images);

輸出

<div class="imagecontainer"> 
    <img src="lq/1.jpg" class="image-1"> 
    <img src="lq/2.jpg" class="image-2"> 
    <img src="lq/3.jpg" class="image-3"> 
    <img src="lq/4.jpg" class="image-4"> 
    <img src="lq/5.jpg" class="image-5"> 
</div>

DEMO

來源

2012-06-18 21:05:51 sachleen

這是一個可怕的做法。每次通過循環都擊中DOM！ – Mathletics

你說得對。更新它。現在好多了？ – sachleen

製作一個圖像html數組。現在

var imgs=[]; 
for(i=1; i<= 590; i++){ 
    imgs.push('<img src="lq/'+i+'/.jpg" class="image-'+i+'"/>') 
}

，你可以把他們帶：

$('.imagecontainer').html(imgs.join(''));

或者你可以錯開它們加載基於什麼最適合你的UI（例如滾動事件）。使用切片（）來獲取數組的部分用於追加（）

添加第一個50：

var first50= imgs.slice(0,50); 
$('.imagecontainer').html(first50.join(''));

來源

2012-06-18 21:12:00 charlietfl

jquery append'x'number圖像元素應用'x'到src和類

回答

相關問題