为每个div添加一个数字

时间:2012-01-08 11:56:28

标签: javascript jquery numbers prepend

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

我目前有这个:

<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>

谢谢你。

4 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

试试这个:

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

答案 2 :(得分:1)

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

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

答案 3 :(得分:1)

与其他解决方案一起,我更喜欢以下(个人品味)

$('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