Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialCaesar Bell
24,829 PointsCreating the team divs with a for loop
Such "dry" programming is being pushed in my head, I am trying to look at way to code dry, and I notice for the team.html they are using the same code to create the divs so I am trying to use a for loop to create the divs. I got it to where it would print out the four team members, but now I need it to pull the four different images as well and the titles but that is what I am confused on. I try to use a nested for loop but the browser crashes trying to load my code i have below is as followed
var teamMembers = ['Caesar', 'Matt', 'Joe', 'John'];
var imgSrc = ['team--01.png', 'team--02.png', 'team--03.png', 'team--04.png'];
for (var i = 0; i < teamMembers.length; i++) {
for (var k = 0; k < imgSrc.length; i++) {
}
$('.team-member-list').append('<div class="grid-fourth">'
+ '<img src=" img/team-members/ ' + imgSrc[k] + ' " ' + ' alt="" class="avatar" />'
+ '<h3>teamMembers[i]</h3>'
+ '<p>CEO</p>'
+ '</div>');
};
Can somone point me in the right direciton on how to solve this.
1 Answer
Chad Donohue
5,657 PointsI think you have a misplaced right curly brace. You need your append code to be inside of the inner for loop. And your inner loop should increment k
rather than i
.
var teamMembers = ['Caesar', 'Matt', 'Joe', 'John'];
var imgSrc = ['team--01.png', 'team--02.png', 'team--03.png', 'team--04.png'];
for (var i = 0; i < teamMembers.length; i++) {
for (var k = 0; k < imgSrc.length; k++) {
$('.team-member-list').append('<div class="grid-fourth">'
+ '<img src=" img/team-members/ ' + imgSrc[k] + ' " ' + ' alt="" class="avatar" />'
+ '<h3>teamMembers[i]</h3>'
+ '<p>CEO</p>'
+ '</div>');
}
}
Caesar Bell
24,829 PointsCaesar Bell
24,829 PointsThank you sometimes a fresh pair of eyes works.
Caesar Bell
24,829 PointsCaesar Bell
24,829 PointsNow my issue is that it prints the same name four times across the row and prints out a total of 8 team members instead of just four.
Chad Donohue
5,657 PointsChad Donohue
5,657 PointsMy fault, here is what you're looking for...