您好，我想对我正在努力实现的目标提出一些建议。
我目前有这个：
<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>
谢谢大家。
【问题讨论】：
class，但 OP 实际上是根据他们给出的输出谈论img src 中的名称...
标签： javascript jquery numbers prepend
$('div.thumbnail').each(function(i) {
var num = zeroPad(i + 1, 3);
$(this).prepend($('<span/>', {
'class': 'index',
'text': num
}));
});
.each() 方法遍历元素，回调接收元素的从零开始的索引 - 所以你有你的计数器。元素本身可以作为this 使用（或作为第二个函数参数，但您并不真正需要它）。 .prepend() 在元素的开头插入传递的元素/字符串。
对于zeroPad 函数，只需在 Google 中或在此处搜索“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;
}
【讨论】：
001、002 等（相当合理）留给读者练习。 :-)
<span class="index">1</span><span class="index">2</span> 没有地址 img src
除了其他解决方案，我更喜欢以下（个人口味）
$('div.thumbnail').prepend(function (index) {
index = '000' + (index + 1);
return '<span class=index>' + index.substr(index.length - 3) + '</span>';
});
prepend 方法采用一个函数，该函数应返回要添加的 html/DOM 对象。在docs 中查看更多信息。
编辑：正如 Michael Durrant 评论的那样，您可能想要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>';
});
在这里，我们将 span before 添加到 img 元素。请参阅before documentation 了解更多信息。
【讨论】：
index.substr 是什么？
index.substr 时，index 是一个字符串。而substr是用于获取子字符串的字符串方法，第一个参数是开始索引，第二个是结束索引（选项，默认为字符串结尾）。
您可以选择具有缩略图类的所有元素，循环遍历它们，并为每个包含索引的元素添加一个跨度。
// 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>");
【讨论】：
this 是.each() 中最常见的方式。
class不是img src
img src，而不是 class
试试这个：
$('.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/ 的工作演示
EDIT 代码已从第一次尝试更改 - 忘记了 $(<tag>, { ... }) 语法仅适用于 jQuery 构造函数，不适用于通用 jQuery 参数情况。
【讨论】：
'class' 而不是className