为每个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>");