Question

我有一系列的div，其中有一个＆＃39; right＆＃39;。在这些div中我有内联图像。我需要编写一个函数，根据父容器的高度＆＃39; a.heading＆＃39;垂直对齐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

jQuery.each() documentation

var el = $('.right');

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

虽然我必须承认我真的很喜欢使用原生JS for - 循环：

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

jQuery使用本地for - 循环作为其each()函数。因此，对于性能而言for - 解决方案肯定更好。如果您不止一次引用同一个对象，那么在变量中存储jQuery对象也是性能的一大优势。

Answer 2

使用.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 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);
    });

每个函数jquery

3 个答案: