Each function jquery

Question

I have a series of divs with a class of 'right'. Within those divs I have inline images. I need to write a function that vertically aligns the image within the div based on the height of its parent container 'a.heading'. The image and the parent container have unknown heights. I have this so far which works but it only works for the first instance of the image. Please can you tell me How to write an each function to iterate over all the images and divs.

//calculate height of parent container
var parent_height = $('a.heading').height();
//get the height of the image 
var image_height = $('.right img.accreditation').height(); 
//calculate how far from top the image should be 
var top_margin = (parent_height - image_height)/2; 
// set the right div to be the same height as the parent height 
$('.right').css('height', parent_height);
//and change the margin-top css attribute of the image 
$('.right img.accreditation').css( 'margin-top' , top_margin); 

Below is the HTML:

<div class="course-list accounting" id="left-accordion">
 <div class="panel-group accordion">
 <div class="panel panel-default">
 <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseCourseOne" class="heading">
 <h4 class="panel-title">
 <div class="left hidden-xs"> <span class="title"> <b>AAT</b> (Association of Accounting Technicians) </span> </div>
 <div class="right"> <img src="img/logo-aat-white.png" alt="AAT" class="accreditation" width="63" height="36" > <span class="count visible-xs">6</span> </div>
 </h4>
 </a> </div>
 <div id="collapseCourseOne" class="panel-collapse collapse in">
 <div class="panel-body">
 <ul>
 <li><a href=""><span>AAT Access</span></a></li>
 <li><a href=""><span>AAT Level 2 Certificate in Accounting</span></a></li>
 <li><a href=""><span>AAT Level 3 Diploma in Accounting</span></a></li>
 <li><a href=""><span>AAT Level 2 Certificate &amp; Level 3 Diploma in Accounting</span></a></li>
 <li><a href=""><span>AAT Level 4 Diploma in Accounting</span></a></li>
 <li><a href=""><span>AAT Level 3 &amp; 4 Diplomas in Accounting</span></a></li>
 </ul>
 </div>
 </div>
 </div>
 </div>
</div>
<div class="course-list accounting" id="right-accordion">
 <div class="panel-group accordion">
 <div class="panel panel-default">
 <div class="panel-heading"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseCourseTwo" class="heading">
 <h4 class="panel-title">
 <div class="left hidden-xs"> <span class="title"> <b>ACCA</b> (Association of Chartered Certified Accountants) </span> </div>
 <div class="right"> <img src="img/logo-acca-white.png" alt="ACCA" class="accreditation" > <span class="count visible-xs">1</span> </div>
 </h4>
 </a> </div>
 <div id="collapseCourseTwo" class="panel-collapse collapse in">
 <div class="panel-body">
 <ul>
 <li><a href=""><span>ACCA Level 4 Diploma</span></a></li>
 </ul>
 </div>
 </div>
 </div>
 </div>
</div>

Answer 1

jQuery.each() documentation

var el = $('.right');
$.each(el, function(a,b){
 //do stuff with each el
});

Although I must admit I really favor using native JS for-loops:

var el = $('.right');
for(var i = 0; i < el.length; ++i){
 var curEl = $(el[i]);
 //do stuff with curEl
}

jQuery uses the native for-loop for its each() function. So for performance the for-solution is definitely better. Storing jQuery objects in variables is also a big plus for performance if you refer to the same object more than once.

• isherwood: Care to explain why? I'm not sure it's necessary to define the el variable, even for performance. $('.right').each(function() {};
• Luuuud: @isherwood I've edited my answer with an explanation
• Frédéric Hamidi: @Luud, a native for loop does not introduce its own scope, but the function you pass to each() does. That's an important difference in some cases, regardless of perf.
• Luuuud: @FrédéricHamidi. True, but in this particular case it doesn't matter.

Answer 2

When using the .each() method, use this to refer to the current element.

// $.each(element,function); 'element' is the selector of your targets
// 'function' is the function that will iterate in those elements
$.each($('.right img.accreditation'), function () {
 //now each $('.right img.accreditation') element is => this
 //calculate height of parent container
 var parent_height = $(this).parents('a.heading').height(); // here you place
 //the class of the parent element that you want refer to
 var image_height = $(this).height(); //get the height of the image
 //calculate how far from top the image should be 
 var top_margin = (parent_height - image_height) / 2;
 // set the right div to be the same height as the parent height 
 $(this).css('height', parent_height);
});

• madameFerry: thanks lfarroco but it calculates the parent div height as null?
• lfarroco: I've looked at your HTML, updating the answer.
• lfarroco: Now you need to find a proper parent element to refer to. Try setting a css height to your h4, then refer the h4 as the parent element.
• madameFerry: Cant set a height to h4- it will expand depending on text content within it
• lfarroco: Edited to look for the a.heading as the parent. The problem with using that element as reference is that it will not have a height value because it is inline.

Answer 3

My working solution....

 // $.each(element,function); 'element' is the selector of your targets
 // 'function' is the function that will iterate in those elements
 $.each($('.right img.accreditation'), function () {
 //now each $('.right img.accreditation') element is => this
 //calculate height of parent container
 var parent_height = $(this).parents('.heading').height(); // here you place the class of the parent element that you want refer to
 var image_height = $(this).height(); //get the height of the image
 //calculate how far from top the image should be 
 var top_margin = (parent_height - image_height) / 2;
 // set the right div to be the same height as the parent height 
 $('.right').css('height', parent_height);
 // and change the margin-top css attribute of the image 
 $(this).css( 'margin-top' , top_margin);
 });