0

嗨，我想对我正在努力实现的目标提出一些建议。

我目前有这个：

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

多谢了。

4

4 回答 4

2 
$('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”，您会发现很多功能。这是一个例子：

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;
}
于 2012-01-08T11:58:45.843 回答
1

试试这个：

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

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

我喜欢 JSXTString.js模块，它可以让你编写"%03d".sprintf(index + 1)

在http://jsfiddle.net/SqQcs/1/工作演示

EDIT代码已从第一次尝试更改 - 忘记了该$(<tag>, { ... })语法仅适用于 jQuery 构造函数，而不适用于通用 jQuery 参数情况。

于 2012-01-08T11:58:53.143 回答
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>");

于 2012-01-08T11:58:59.493 回答
1

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

$('div.thumbnail').prepend(function (index) {
    index = '000' + (index + 1);
    return '<span class=index>' + index.substr(index.length - 3) + '</span>';
});

该prepend方法采用一个函数，该函数应返回要添加的 html/DOM 对象。在文档中查看更多信息。

编辑：正如迈克尔杜兰特评论的那样，您可能想要img'ssrc属性中的数字，而不是序号。如果是这种情况，以下内容应该可以满足您的要求。

$('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在这里，我们添加 spanimg元素。有关更多信息，请参阅before文档。

于 2012-01-08T12:04:00.170 回答