每個函數jquery

Question

我有一系列的div有一個'right'類。在這些div中我有內聯圖像。我需要編寫一個函數，根據其父容器'a.heading'的高度在div內垂直對齊圖像。圖像和父容器具有未知高度。 我有這個迄今爲止工作，但它只適用於圖像的第一個實例。請你能告訴我如何編寫一個函數遍歷所有的圖像和div。

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

下面是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

使用.each()方法時，請使用this來引用當前元素。

// $.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); 
}); 

Answer 2

jQuery.each() documentation

var el = $('.right'); 

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

儘管我必須承認，我真的很贊成使用本機JS for -loops：

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

我們的jQuery es原生for -loop爲其each()功能。所以爲了表現，for-解決方案肯定更好。如果多次引用同一個對象，則將jQuery對象存儲在變量中對性能來說也是一大優點。

Answer 3

我工作的解決方案....

// $.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); 
    });