add a number for each div

Question

Hi I'd like some advice with what I'm trying to achieve.

I currently have this:

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

For each .thumbnail I would like to prepend an index number with a span. Achieving this:

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

Thanks heaps.

I think the answers so far are addressing `class` but the OP is actually talking about the name in the `img src` based on the output they have given... — Michael Durrant, Jan 08 '12 at 12:11

score 2 · Answer 1 · edited May 23 '17 at 11:58

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

The .each() method iterates over the elements and the callback receives the zero-based index of the element - so there you have your counter. The element itself is available as this (or as the second function argument, but you don't really need that). .prepend() inserts the passed element/string at the beginning of the element.

For a zeroPad function, simply search for "pad number javascript" in Google or here on SO and you'll find quite a few functions. Here's one for example:

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 (though more explanation would be nice). @uriah: Formatting the index into `001`, `002`, etc. is (quite reasonably) left as an exercise for the reader. :-) — T.J. Crowder, Jan 08 '12 at 12:01

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

1

Try this:

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

Note that it won't add leading zeroes, as is.

I like the JSXT String.js module which would allow you to write "%03d".sprintf(index + 1)

Working demo at http://jsfiddle.net/SqQcs/1/

EDIT code has changed from first attempt - forgot that $(<tag>, { ... }) syntax only works in the jQuery constructor, and not in the generalised jQuery argument case.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 08 '12 at 11:58

Alnitak

334,560
70
407
495

At least in recent jQuery versions you need `'class'` instead of `className` – ThiefMaster Jan 08 '12 at 12:01
1

@MichaelDurrant no, jQuery will add it itself – Alnitak Jan 08 '12 at 12:02

score 1 · Answer 3 · answered Jan 08 '12 at 11:58

1

You can select all elements with the thumbnail class, loop over them, and prepend a span to each element containing the index.

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

In this case the index will be number will be zero-based. If you like the index to start with 1, you can change the middle row to this: $(elm).prepend('<span class="index">' + (i + 1) + '</span>");

answered Jan 08 '12 at 11:58

Christofer Eliasson

32,939
7
74
103

1

Using `this` is the most common way in `.each()` though. – ThiefMaster Jan 08 '12 at 12:03
@ThiefMaster Agreed, however I thought the example would be more obvious this way. Easier to understand. – Christofer Eliasson Jan 08 '12 at 12:14
Now realized this addresses `class` not `img src` – Michael Durrant Jan 08 '12 at 12:14
@MichaelDurrant what do you mean? – Alnitak Jan 08 '12 at 12:18
when I look at the code that the OP put (top) in the question, it seems like they want the `img src` changed, not the `class` – Michael Durrant Jan 08 '12 at 12:21
not 100% clear from the question. maybe it is the class they want the index_number on. Still, dynamic classes like that look yucky somewhat – Michael Durrant Jan 08 '12 at 12:23
@MichaelDurrant Sorry I was just trying to indicate it was the next thumbnail. – uriah Jan 08 '12 at 12:32

sharat87 · Accepted Answer · 2012-01-08T14:13:09.047

1

Along with the other solutions, I prefer the following (personal taste)

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

The prepend method takes a function that should return the html/DOM object that is to be prepended. See more in the docs.

Edit: As Michael Durrant commented, you might be wanting the numbers in the img's src attribute, not sequential numbers. If that is the case, the following should have you covered.

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

Here, we add the span before the img elements. See the before documentation for more.

edited Jan 08 '12 at 14:13

answered Jan 08 '12 at 12:04

sharat87

7,330
12
55
80

see my comment on the q above. – Michael Durrant Jan 08 '12 at 12:15
This is the easiest to understand. I'm trying to make it myself as well. What is `index.substr`? – uriah Jan 08 '12 at 12:36
1

@MichaelDurrant, That might be what the OP wants, but if it is, I'll wait for the OP to comment on this. @uriah, When I call `index.substr`, `index` is a string. And `substr` is a string method used to get a substring, first argument is start index and second is end index (option, defaults to end of string). – sharat87 Jan 08 '12 at 14:05

add a number for each div

4 Answers4