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 trial
Johan Delforge
13,317 PointsFor loop ? How can i dry this JS code ?
Hi every one,
I am trying to dry this piece of code...
I guess i need to put an increamenting value inside .eq(x) ... i have tried several stuff, with no success...
... Anyone ? Thank you !
$(".entete_formateur a").eq(0).click(function(){
$(".entete_formateur img").attr("src","../wp-content/uploads/2014/11/button_unfold.png");
$(".margin_space_bottom").slideUp(300);
$(".margin_space_top").slideUp(300);
$(".info_formateur").slideUp(400);
$(".info_formateur").eq(0).slideDown(500);
$(".margin_space_bottom").eq(0).slideDown(300);
$(".margin_space_top").eq(0).slideDown(300);
$(".entete_formateur img").eq(0).attr("src","../wp-content/uploads/2014/11/button_fold.png");
});
$(".entete_formateur a").eq(1).click(function(){
$(".entete_formateur img").attr("src","../wp-content/uploads/2014/11/button_unfold.png");
$(".margin_space_bottom").slideUp(300);
$(".margin_space_top").slideUp(300);
$(".info_formateur").slideUp(400);
$(".info_formateur").eq(1).slideDown(500);
$(".margin_space_bottom").eq(1).slideDown(300);
$(".margin_space_top").eq(1).slideDown(300);
$(".entete_formateur img").eq(1).attr("src","../wp-content/uploads/2014/11/button_fold.png");
});
$(".entete_formateur a").eq(2).click(function(){
$(".entete_formateur img").attr("src","../wp-content/uploads/2014/11/button_unfold.png");
$(".margin_space_bottom").slideUp(300);
$(".margin_space_top").slideUp(300);
$(".info_formateur").slideUp(400);
$(".info_formateur").eq(2).slideDown(500);
$(".margin_space_bottom").eq(2).slideDown(300);
$(".margin_space_top").eq(2).slideDown(300);
$(".entete_formateur img").eq(2).attr("src","../wp-content/uploads/2014/11/button_fold.png");
});
$(".entete_formateur a").eq(3).click(function(){
$(".entete_formateur img").attr("src","../wp-content/uploads/2014/11/button_unfold.png");
$(".margin_space_bottom").slideUp(300);
$(".margin_space_top").slideUp(300);
$(".info_formateur").slideUp(400);
$(".info_formateur").eq(3).slideDown(500);
$(".margin_space_bottom").eq(3).slideDown(300);
$(".margin_space_top").eq(3).slideDown(300);
$(".entete_formateur img").eq(3).attr("src","../wp-content/uploads/2014/11/button_fold.png");
});
$(".entete_formateur a").eq(4).click(function(){
$(".entete_formateur img").attr("src","../wp-content/uploads/2014/11/button_unfold.png");
$(".margin_space_bottom").slideUp(300);
$(".margin_space_top").slideUp(300);
$(".info_formateur").slideUp(400);
$(".info_formateur").eq(4).slideDown(500);
$(".margin_space_bottom").eq(4).slideDown(300);
$(".margin_space_top").eq(4).slideDown(300);
$(".entete_formateur img").eq(4).attr("src","../wp-content/uploads/2014/11/button_fold.png");
});
$(".entete_formateur a").eq(5).click(function(){
$(".entete_formateur img").attr("src","../wp-content/uploads/2014/11/button_unfold.png");
$(".margin_space_bottom").slideUp(300);
$(".margin_space_top").slideUp(300);
$(".info_formateur").slideUp(400);
$(".info_formateur").eq(5).slideDown(500);
$(".margin_space_bottom").eq(5).slideDown(300);
$(".margin_space_top").eq(5).slideDown(300);
$(".entete_formateur img").eq(5).attr("src","../wp-content/uploads/2014/11/button_fold.png");
});
'''
3 Answers
Dave McFarland
Treehouse TeacherjQuery's .each() method takes an anonymous function which accepts an index value as a parameter like this:
$('a').each( function (index) {
// index changes for each 'a'
};
Have you tried this:
$(".entete_formateur a").each( function(index) {
$(this).click(function(){
$(".entete_formateur img").attr("src","../wp-content/uploads/2014/11/button_unfold.png");
$(".margin_space_bottom").slideUp(300);
$(".margin_space_top").slideUp(300);
$(".info_formateur").slideUp(400);
$(".info_formateur").eq(index).slideDown(500);
$(".margin_space_bottom").eq(index).slideDown(300);
$(".margin_space_top").eq(index).slideDown(300);
$(".entete_formateur img").eq(index).attr("src","../wp-content/uploads/2014/11/button_fold.png");
});
}); // end each
However, I'm sure there's a better way. If we could see the HTML that this applies to, I'm sure you can access those other elements without the use of the eq() method.
Johan Delforge
13,317 PointsHi Geoffrey, i'm not sure it does answer the question...
As you can see, in the code there is a pattern using .eq(0), .eq(1), .eq(2), etc... on multiple lines....
i thought i could have been using a for loop with increamenting .eq(i), but with no success.
In your suggestions, the others .eq(0) are not replaced... i 've tried with .eq(index) on each, but with no success...
(it is for repeater elements made with advanced custom fields)
Cheerz !
Johan
geoffrey
28,736 PointsHi Johan, sorry, I've just seen I had left some mistakes in the code I posted earlier, I had left the eq() method in the second exemple while I had to remove it. It has no sense to leave it. It's now corrected... Otherwise, if you had in mind to use the eq() method, indeed you have to place index inside each eq method => eq(index) and inside the fuction as Dave showed us... Anyway, I'm glad you found a solution.
On my side, currently living in Namur but I used to live in Thuin a small city next Charleroi. We are neighbors ^^
geoffrey
28,736 PointsYou typed 'for loop' in the title of the subject, you could use $.each with Jquery and get something like that. But at the same time, unless I don't understand what you want to achieve, I 've noticed you apply the same methods, all the time to the selector $(".entete_formateur a"), so why should we use a loop ? It's in fact not necessary.
With a "for" loop, I would probably go to something like that:
$(".entete_formateur a").each(function(){
$(this).click(function(){
$(".entete_formateur img").attr("src","../wp-content/uploads/2014/11/button_unfold.png");
$(".margin_space_bottom").slideUp(300);
$(".margin_space_top").slideUp(300);
$(".info_formateur").slideUp(400);
$(".info_formateur").eq(0).slideDown(500);
$(".margin_space_bottom").eq(0).slideDown(300);
$(".margin_space_top").eq(0).slideDown(300);
$(".entete_formateur img").eq(0).attr("src","../wp-content/uploads/2014/11/button_fold.png");
});
});
But if you don't necessarily need it, I would simply do this:
// in other words, I 've simply deleted the eq() method, and all the $(".entete_formateur a") elements get the method you want applied on click.
$(".entete_formateur a").click(function(){
$(".entete_formateur img").attr("src","../wp-content/uploads/2014/11/button_unfold.png");
$(".margin_space_bottom").slideUp(300);
$(".margin_space_top").slideUp(300);
$(".info_formateur").slideUp(400);
$(".info_formateur").slideDown(500);
$(".margin_space_bottom").slideDown(300);
$(".margin_space_top").slideDown(300);
$(".entete_formateur img").attr("src","../wp-content/uploads/2014/11/button_fold.png");
});
Ps: cool to see someone else from Belgium here :)
Johan Delforge
13,317 PointsHey Geoffrey, Dave just gave me the easiest answer...
I understand now you also put me on right track,
but by the time i didn't have my head clear enough to adapt your answer.
I also just saw your PS mention... good to know :).
I'm from Pont-à-Celles, between Charleroi & Nivelles... Where are you from ? Cheerz !!
Johan
Johan Delforge
13,317 PointsJohan Delforge
13,317 PointsIt works perfectly, thanx a lot Dave !