Question

嗨，我想对我想要实现的目标提出一些建议。

我目前有这个：

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

对于每个.thumbnail，我想在一个带有span的索引编号前面加上。实现这一目标：

<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').each(function(i) {
    var num = zeroPad(i + 1, 3);
    $(this).prepend($('<span/>', {
        'class': 'index',
        'text': num
    }));
});

.each()方法迭代元素，回调接收元素的从零开始的索引 - 所以你有你的计数器。元素本身可用作this（或作为第二个函数参数，但您并不真正需要它）。 .prepend()在元素的开头插入传递的元素/字符串。

对于zeroPad功能，只需搜索＆＃34; pad number javascript＆＃34;在谷歌或这里的SO，你会发现很多功能。例如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 2

试试这个：

$('.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参数情况下。

Answer 3

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

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

Answer 4

与其他解决方案一起，我更喜欢以下（个人品味）

$('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的{{1}}属性中的数字，而不是序号。如果是这种情况，以下内容应该包括在内。

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元素。有关详情，请参阅before documentation。

为每个div添加一个数字

4 个答案: