Javascript 为每个div添加一个数字

嗨，我想要一些关于我努力实现的建议

我目前有：

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

谢谢你的帮助。

试试这个：

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

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

$（'.thumbnail'）。每个（函数（索引）{
$('', {
“类”：“索引”，
文本：“%03d”。sprintf（索引+1）
}).prependTo（本）；
});

请注意，它不会按原样添加前导零

我喜欢JSXT模块，它允许您编写

“%03d”.sprintf（index+1）

工作演示

EDIT代码已从第一次尝试更改-忘记了

$（，{…}）

语法仅在jQuery构造函数中有效，而不在一般的jQuery参数情况下有效。

尝试以下方法：

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

$（'.thumbnail'）。每个（函数（索引）{
$('', {
“类”：“索引”，
文本：“%03d”。sprintf（索引+1）
}).prependTo（本）；
});

请注意，它不会按原样添加前导零

我喜欢JSXT模块，它允许您编写

“%03d”.sprintf（index+1）

工作演示

---

EDIT代码已从第一次尝试更改-忘记了

$（，{…}）

语法仅适用于jQuery构造函数，而不适用于一般的jQuery参数。

您可以使用缩略图类选择所有元素，对它们进行循环，并为包含索引的每个元素预先添加一个范围

// 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>");
});

//选择带有class.缩略图的所有元素并在其上循环
$（“.thumbnail”）。每个（函数（i，elm）{
//为每个元素预先添加索引范围
$（elm）。前缀（“”+i+“”）；
});

---

在这种情况下，索引将是从零开始的数字。如果您希望索引以1开头，可以将中间行更改为：

$（elm）
您可以使用缩略图类选择所有元素，在它们上面循环，并为包含索引的每个元素预先添加一个范围

// 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>");
});

//选择带有class.缩略图的所有元素并在其上循环
$（“.thumbnail”）。每个（函数（i，elm）{
//为每个元素预先添加索引范围
$（elm）。前缀（“”+i+“”）；
});

在这种情况下，索引将是从零开始的数字。如果您希望索引以1开头，可以将中间行更改为：
$（elm）
连同其他解决方案，我更喜欢以下（个人口味）

这里，我们在
img
元素之前添加span
。有关更多信息，请参见。
除了其他解决方案，我更喜欢以下（个人口味）

这里，我们在
img
元素之前添加span
。有关详细信息，请参阅。
+1（不过最好有更多解释）@uriah：将索引格式化为
001
，
002
，等等，（相当合理地）留给读者作为练习。：-
12
没有说明
img src
+1（尽管需要更多解释）@uriah：将索引格式化为
001
，
002
，等等，（相当合理地）留给读者作为练习。：-
12
至少在最近的jQuery版本中没有解决
img src
问题，您需要
类
而不是
类名
@MichaelDurrant否，jQuery将自己添加它，至少在最近的jQuery版本中您需要
类
而不是
类名
@MichaelDurrant否，jQuery将使用
自己添加它。这是
中最常用的方法。不过each（）
都同意。@ThiefMaster同意，不过我认为这样的例子会更明显。更容易理解。现在意识到这个地址是
class
而不是
img src
@michaelcurrent你是什么意思？当我看OP在问题中放置的代码时，似乎他们想要
img src
更改，而不是
类使用
这个
是
中最常见的方式。each（）
尽管如此。@ThiefMaster同意，但我认为这样的例子会更明显。更容易理解。现在意识到这个地址是
类
而不是
img src
@michaelcurrent你是什么意思？当我看到OP在问题中放置的代码（顶部）时，似乎他们想更改
img src
，不是
类
我认为到目前为止的答案是解决
类
，但OP实际上是根据他们给出的输出在
img src
中谈论名称…我认为到目前为止的答案是解决
类
但OP实际上是根据他们给出的输出…见我对上面q的评论。这是最容易理解的。我也在试着自己做。什么是
index.substr
？@Michaeldurrent，这可能是OP想要的，但如果是，我将等待OP对此发表评论@乌利亚，当我调用
index.substr
时，
index
是一个字符串。
substr
是一种用于获取子字符串的字符串方法，第一个参数是开始索引，第二个参数是结束索引（选项，默认为字符串的结尾）。请参阅我对上面q的评论。这是最容易理解的。我也在试着自己做。什么是
index.substr
？@Michaeldurrent，这可能是OP想要的，但如果是，我将等待OP对此发表评论@乌利亚，当我调用
index.substr
时，
index
是一个字符串。
substr
是用于获取子字符串的字符串方法，第一个参数是开始索引，第二个是结束索引（选项，默认为字符串的结尾）。
$('div.thumbnail').prepend(function (index) {
    index = '000' + (index + 1);
    return '<span class=index>' + index.substr(index.length - 3) + '</span>';
});

$('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>';
});