I have some code where I want to loop through the amount of elements and set the text inside each one from 1 through however many there are. My approach is below:

$(function() {
  var items = $(".item");
  items.each(function(i) {
    var itemCount = i + 1;
    items.text(itemCount);
  });
});

<script src=".0.0/jquery.min.js"></script>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>

I have some code where I want to loop through the amount of elements and set the text inside each one from 1 through however many there are. My approach is below:

$(function() {
  var items = $(".item");
  items.each(function(i) {
    var itemCount = i + 1;
    items.text(itemCount);
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>

It's however printing the total number 6 times. In this specific example, 6.

The way I understood .each() is that it iterates each element individually and my thinking was that I would be able to pass in the value of itemCount and have it count each element individually. If I did a regular vanilla JS loop the results in the snippet would make sense since it pletes before it prints.

How can I change this approach to print the numbers in order (1 2 3 4 5 6) rather than the total amount of elements 6 times?

• javascript
• jquery

• $(this).text(itemCount) - items is your array, you want the one specific to the loop – Pete Commented Feb 9, 2018 at 14:53
• sidenote, you don't need to iterate yourself. this works too: $(".item").text(index => index+1); – Thomas Commented Feb 9, 2018 at 15:26

3 Answers 3

You have to use this as selector like $(this). this referer to the element on each loop.

Currently, you are using items which refers to all html elements with class .item

$(function() {
  var items = $(".item");
  items.each(function(i) {
    var itemCount = i + 1;
    $(this).text(itemCount);
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>

The issue is because items refers to all the elements, so you update every one of them in each iteration. To fix this you can use the this keyword to refer to the current instance in the each() loop.

Better still, you can provide a function to the text() method and use the first argument provided to the handler function which is the index of the element. That way you don't need the explicit loop or a reference to the element at all. Try this:

$(".item").text(function(i) {
  return ++i;
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>

items is set to $(".item"); so you need to specificy which item to use using $(this)

$(function() {
  var items = $(".item");
  items.each(function(i) {
    var itemCount = i + 1;
    $(this).text(itemCount);
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>