Question

I have a number of div elements with three class names each. There is an image inside each one. They’re consecutively numbered (i1, i2, i3…) through class names. The class names are something like "img small i14". I need to increment the numbers of these class names for each element.

So: for each of these div elements I need to change the class starting with i – add 1 or subtract 1 from it. Hopefully there is an efficient way of doing this.

The goal of the whole thing is to create a rotating image gallery. I’d much appreciate help, either through helping with the code or offering a better way of approaching the problem. Thank you.

Answer 1

If you combine Pointy’s regExp with undefined’s jQuery attribute setter you get this:

$(a selector).attr('class', function (index, attrValue) {
    return attrValue.replace(/\bi(\d+)\b/, function (match, $1) { 
        return 'i' + (Number($1) + 1);
    });
});

Which works fine (cross browsers i suppose), since the class is an html attribute.

EDIT: To check whether it’s the last image or not you’ll have to know how many images it is in that container, so you’ll have to have a jquery selector that just matches the images in one of the containers.
The code would look like this:

var number_of_elements = $(the selector).length;

$(the selector).attr('class', function (index, attrValue) {
    return attrValue.replace(/\bi(\d+)\b/, function (match, $1) { 
        var number = Number($1);
        if (number === number_of_elements) {
            return 1
        } else {
            return 'i' + (number + 1);
        }
    });
});