CODEWITHSUNDEEP
javascriptjqueryhtml
user1751287
user1751287

Reputation: 501

Loop through set of elements and add proper value from different array

I'm trying to loop through a set of elements of the same class and add a matching value from different array but something is wrong. Here is a code sample:

var targetElements = $('.selected');
var array1 = ["a", "b", "c"]; 

//this works but it ads the same value
for(j=0; j < targetElements.length; j++){
     targetElements.html(array1[j]);         
}

//if I try this, it does not work and I get error
//TypeError: targetElements[j].html is not a function
for(j=0; j < targetElements.length; j++){
     targetElements[j].html(array1[j]);         
}

Why am I getting a TypeError?

Upvotes: 0

Views: 35

Answers (4)

Ouroborus
Ouroborus

Reputation: 16875

In your code, targetElements is assigned a jQuery object. jQuery objects acts as collections of DOM nodes. The DOM nodes themselves do not understand jQuery calls, only the wrapping jQuery object does. By using array indicing you are accessing one of those DOM nodes directly and then attempting to call a function (.html()) that doesn't exist on DOM nodes. You'll need to re-wrap that DOM node in a jQuery object to get back the functionality you want as in $(targetElements[j]):

for(j=0; j < targetElements.length; j++){
  $(targetElements[j]).html(array1[j]);         
}

(While primarily used to select elements out of a document, $() has a lot of capabilities tied to it. Read more about it the documentation.)

Even better, use jQuery's collection tools to loop through the jQuery object, in this case each:

targetElements.each(function(i, v) {
  $(v).html(array1[i]);
});

Upvotes: 1

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

Use the jQuery eq() method:

var targetElements = $('.selected');
var array1 = ["a", "b", "c"]; 

for(j = 0; j < targetElements.length; j++) {
  targetElements.eq(j).html(array1[j]);         
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="selected"></p>
<p class="selected"></p>
<p class="selected"></p>
You can avoid the loop altogether by setting the html() of the selection based on its index:

var targetElements = $('.selected');
var array1 = ["a", "b", "c"]; 

targetElements.html(function(idx) {
  return array1[idx];
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="selected"></p>
<p class="selected"></p>
<p class="selected"></p>

Upvotes: 2

Peter B
Peter B

Reputation: 24187

The variable targetElements is a jQuery object, more or less a wrapper around an array of DOM elements. By using the array notation targetElements[j] you get an item from the array, but that element does not have the jQuery wrapper, and so it does not have the jQuery .html() method, hence the error.

You can wrap the item and make it a jQuery object again by putting $() around it, like this:

for (j = 0; j < targetElements.length; j++) {
    $(targetElements[j]).html(array1[j]);         
}

Upvotes: 1

Alexander Staroselsky
Alexander Staroselsky

Reputation: 38807

You can use jQuery each(). to iterate through the elements and this to target each respective jQuery object/element. The issue is that .html() is a jQuery method and you are trying to execute that on a pure DOM element.

targetElements.each(function( ) {
  $(this).html(array1[k]);
});

or

for(j=0; j < targetElements.length; j++){
     $(targetElements[j]).html(array1[j]);         
}

Upvotes: 1

Related Questions