Numerate divs alphabetically

September 6, 2023

I have an array of letters from A to U, according to which I should be numerating the dynamically generated divs

const alphabetArray = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U"]

$(".numeration").each(function () {
    for (let i = 0; i <= alphabetArray.length; i++) {
        $(".numeration").html(alphabetArray[i]);
    }
})

there is one issue though, every div is numerated as U, the last element in the array. I know I am overlooking something simple in this logic but I can’t figure out what exactly.

>Solution :

Your first problem is, that $(".numeration").html() accesses every element in that group.

You are basically setting the current letter for all elements matching that selector.

If you only want to execute the current object of the "each" you need to use $(this).html(); instead

The second problem is your nested loop of your alphabetArray. You are basically overwriting the current value until you reach the end of your array (hence why only the last element shows up).

If you try something like this you should be closer to your goal:

const alphabetArray = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U"]

$(".numeration").each(function (index) 
        $(this).html(alphabetArray[index]);
    }
})