Question

Let’s have an example:

<div class="gg-1"></div> // 1
<div class="gg-1"></div> // 1
<div class="gg-1"></div> // 1

<div class="gg-3"></div> // 3
<div class="gg-3"></div> // 3

<div class="gg-5"></div> // 5
<div class="gg-5"></div> // 5

How could I update those divs classes to get the below result?

<div class="gg-1"></div> // 1
<div class="gg-1"></div> // 1
<div class="gg-1"></div> // 1

<div class="gg-2"></div> // 2
<div class="gg-2"></div> // 2

<div class="gg-3"></div> // 3
<div class="gg-3"></div> // 3

Pure Javascript needed (JQuery as additional).

My function below could help you in getting elements by class with a prefix:

function scn$(container,selectorTag,prefix) {
    var items = [], myPosts = document.getElementById(container).getElementsByTagName(selectorTag);

    for (var i = 0; i < myPosts.length; i++) {
        // Omit Undefined Null Check
        if (myPosts[i].className.lastIndexOf(prefix,0) === 0) {
            items.push(myPosts[i]);
        }
    }
    return items;
}

So for now we can select our elements by scn$('container','div','gg-').

What’s next? Any ideas/clues?

Answer 1

Try below approach and let me know,

DEMO: http://jsfiddle.net/pmc3g/

(function() {

    function scn$(container, selectorTag, prefix) {
        var items = [],
            myPosts = document.getElementById(container).getElementsByTagName(selectorTag);

        var prevClass = null, curVal = 0;
        for (var i = 0; i < myPosts.length; i++) {
            var curClass = myPosts[i].className;
            // Omit Undefined Null Check
            if (curClass.lastIndexOf(prefix, 0) === 0) {

                if (prevClass != curClass) {
                    prevClass = curClass;
                    curVal++;                   
                }

                myPosts[i].className = prefix + curVal;
                items.push(myPosts[i]);
                console.log(myPosts[i].className);
            }
        }
        return items;
    }

    scn$('container', 'div', 'gg-');

})();