3

I understand the basic premise of a for loop with JavaScript, however the use of the .each evades me.

var col = [1, 2, 3, 4, 5, 6];

for (var i = 0; i < col.length; i++) {
    $('p').html(col[i]);
}

Which churns out:

<p> 6 </p>
<p> 6 </p>
<p> 6 </p>

When I was expecting:

<p> 1 </p>
<p> 2 </p>
<p> 3 </p>

Why is this not working as expected, and how could it be done with jQuery, rather than pure JavaScript?

http://jsfiddle.net/rgD92/2/

Improve this question
2
  • 4
    you have a kind of nested loop affecting last value to all P elements: $('p') target all P elements, so at each loop iteration, you are updating value for all these elements Commented Nov 21, 2013 at 15:38
  • Aah okay. How do you mean nested loop — loop within a loop? Commented Nov 21, 2013 at 17:03

5 Answers 5

Reset to default
2

See the code below:

var col = [1, 2, 3, 4, 5, 6];
$('p').each(function(index){
    $(this).text(col[index]);
});

Why your code doesn't work?

When you iterate the "col" list inside the loop, you took all references <p> elements, when the last interaction occurred, the number 6 will be set in all <p> elements.

Update:

If you have more <p> elements than numbers in col list, you can use % operator like the code below:

var col = [1, 2, 3, 4, 5, 6];

$('p').each(function(index){
    $(this).text(col[index % col.length]);
});

Demo

I hope this helps.

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

3 Comments

That's great — you've really helped. Also, how would I get the loop to start again once the col array has ran out? It loops through all the numbers, not through all the p tags. Would it involve the modulo % operator?
@tmyie I updated the answer. Basically I altered the index to use the % operator. I think that is what you are looking for.
That's perfect — I don't quite understand the logic of that, however.
2

You need to select which p to be updated also, in every iteration you are updating all the p elements in the document.

In the given sample you can use .eq() to select the p element sequentially.

for (var i = 0; i < col.length; i++) {
    $('p').eq(i).html(col[i]);
}

Demo: Fiddle

Improve this answer

Comments

2

You could simply do:

$('p').text(function(i){
    return col[i];
});

JS Fiddle demo.

This will allow jQuery to iterate over the collection itself, rather than using an explicit for loop.

If, as your comment to another answer suggests, you want the col text/contents to loop, should the array be shorter than the number of p elements:

$('p').text(function(i){
    return col[i % col.length];
});

JS Fiddle demo.

References:

Improve this answer

Comments

1

Using jQuery and each(), you could do:

var col = [1, 2, 3, 4, 5, 6];
$("p").each(function(i) {
    $(this).html(col[i]);
});
Improve this answer

Comments

0

Your $('p') selector selects all p's on page and your loop updates all p's too.

var col = [1, 2, 3, 4, 5, 6];

for (var i = 0; i < col.length; i++) {
    $('p:eq(' + i + ')').html(col[i]);
}

JSFiddle

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.