CODEWITHSUNDEEP
jquery
madameFerry
madameFerry

Reputation: 229

Each function jquery

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>

Upvotes: 1

Views: 154

Answers (3)

madameFerry
madameFerry

Reputation: 229

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);
    });

Upvotes: 0

lfarroco
lfarroco

Reputation: 624

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);
});

Upvotes: 0

Luuuud
Luuuud

Reputation: 4439

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.

Upvotes: 1

Related Questions