爲每個div添加一個數字

Question

嗨，我想用我想達到的一些建議。

目前，我有這樣的：

<div class="thumbnail"> 
<img src="thumbnail_1.jpg" /> 
</div> 

對於每個.thumbnail我想前面加上索引號，跨度。實現此目的：

<div class="thumbnail"> 
<span class="index">001</span> 
<img src="thumbnail_1.jpg" /> 
</div> 

<div class="thumbnail"> 
<span class="index">002</span> 
<img src="thumbnail_2.jpg" /> 
</div> 

感謝堆。

Answer 1

隨着其他解決方案，我更喜歡以下（個人口味）

$('div.thumbnail').prepend(function (index) { 
    index = '000' + (index + 1); 
    return '<span class=index>' + index.substr(index.length - 3) + '</span>'; 
}); 

的prepend方法採用函數，該函數應返回要添加的html/DOM對象。請參閱docs。

編輯：正如邁克爾·達蘭特評論，你可能會想在img的src屬性，而不是序列號的數字。如果是這種情況，應該包括以下內容。

$('div.thumbnail > img').before(function() { 
    var index = this.src.match(/\d+/); 
    if (index === null) return; 
    index = '000' + index; 
    return '<span class=index>' + index.substr(index.length - 3) + '</span>'; 
}); 

在這裏，我們添加跨度before的img元素。有關更多信息，請參閱before documentation。

Answer 2

$('div.thumbnail').each(function(i) { 
    var num = zeroPad(i + 1, 3); 
    $(this).prepend($('<span/>', { 
     'class': 'index', 
     'text': num 
    })); 
}); 

在元素和回調的.each()方法迭代接收元素的索引（從零開始） - 所以你有你的櫃檯。該元素本身可用作this（或作爲第二個函數參數，但您並不需要）。 .prepend()將傳遞的元素/字符串插入元素的開頭。

對於zeroPad函數，只需在Google或SO上搜索「pad number javascript」即可找到相當多的函數。 Here's一個例子：

function zeroPad(num, numZeros) { 
    var n = Math.abs(num); 
    var zeros = Math.max(0, numZeros - Math.floor(n).toString().length); 
    var zeroString = Math.pow(10,zeros).toString().substr(1); 
    if(num < 0) { 
     zeroString = '-' + zeroString; 
    } 
    return zeroString + n; 
} 

Answer 3

試試這個：

$('.thumbnail').each(function(index) { 
    $('<span/>', { 
     'class': 'index', 
     text: "%03d".sprintf(index + 1) 
    }).prependTo(this); 
}); 

注意，它不會增加前導零，因爲是。

我喜歡JSXT String.js模塊，這將允許你寫"%03d".sprintf(index + 1)

工作演示在http://jsfiddle.net/SqQcs/1/

編輯代碼已經從第一次嘗試改變 - 忘了$(<tag>, { ... })語法只適用於jQuery的構造器的工作原理，而不是在廣義的jQuery參數的情況下。

Answer 4

您可以選擇所有具有縮略圖類的元素，循環它們，併爲每個包含索引的元素添加一個範圍。

// Select all elements with class .thumbnail and loop over them 
$(".thumbnail").each(function(i, elm) { 
    // Prepend a index span to each element 
    $(elm).prepend('<span class="index">' + i + '</span>"); 
}); 

在這種情況下，索引將被編號爲零。如果你喜歡該指數從1開始，您可以更改中間行這樣：$(elm).prepend('<span class="index">' + (i + 1) + '</span>");