how to replace text inside a div using a for loop in jQuery

Question

What am I doing wrong here? Not well versed in js, so assuming I'm doing my for loop wrong.

<div class="date-widget">
  hello1
</div>
<div class="date-widget">
  hello2
</div>

js

$(document).ready(function() {

  var utcInstances = $('.date-widget');

  for (i = 0; i < utcInstances.length; i++) {
    utcInstances[i].text("new text");
  }

});

error:

TypeError: utcInstances[i].text is not a function

http://jsfiddle.net/0jkwasqc/1/

When you index a jQuery collection, the values are DOM elements, not jQuery objects. — Barmar
– Barmar, Commented Oct 21, 2020 at 20:02
You don't need a loop, just do utcInstances.text("new text"); if you want to give them all the same text. — Barmar
– Barmar, Commented Oct 21, 2020 at 20:03
they will all be unique and dynamic names, I just put "new text" in the fiddle for brevity, my fault there — stephan
– stephan, Commented Oct 21, 2020 at 20:05

Sunny Patel · Accepted Answer · 2020-10-21 20:04:55Z

2

It's jQuery that you'll need more practice with. Specifically when you want to loop through a jQuery collection, you should use .each().

Each item in the collection is a DOM object, not a jQuery object, so you'll have to wrap it before calling .text on it.

$(document).ready(function() {

  var utcInstances = $('.date-widget');

  utcInstances.each( (i, instance) => {
    $(instance).text("new text");  // Wrap instance DOM object into a jQuery object before calling .text
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="date-widget">
  hello1
</div>
<div class="date-widget">
  hello2
</div>

answered Oct 21, 2020 at 20:04

Sunny Patel

8,0972 gold badges35 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to replace text inside a div using a for loop in jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related