Question 243670 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Numerate divs alphabetically

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.

Tags:

3

Answers


  1. 0

    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]);
});
    Login or Signup to reply.
  2. 0

    Use eq() method to select element.

    Check out this for refrence:- https://www.w3schools.com/jquery/traversing_eq.asp

    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 (i) {
  
    $(".numeration").eq(i).html(alphabetArray[i]);

})
    Login or Signup to reply.
  3. 0

    .html() already considers your elements collection (just like .each()) with an index as its first argument. You can then use the return (or implicit return if you use arrow functions => ) and use that index:

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

$(".numeration").html(i => alphabetArray[i]);
      <div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    Also, nowadays jQuery is not necessary:

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

document.querySelectorAll(".numeration").forEach((el, i) => {
  el.textContent = alphabetArray[i]
});
    <div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div><div class="numeration"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search