将每个元素的列高度设置为另一个

Question

可悲的是，我需要使用JS将col-1 （静态）设置为与文本容器col-2 （动态）相同的高度。

我试过了：

$(function () {

    var article = $('section.inner-services article');

    $(article).each(function( index ) {

        var textColHeight = $('section.inner-services article .col-2').height();
        var figureCol  = $('section.inner-services article .col-1');
        $(figureCol).css('height', textColHeight);
        console.log(index);

    });

});

我的HTML标记是（简体）：

<section class="inner-services"> 
    <article> 
        <col-1> 
        <col-2> 
    </article> 
</section> 

这不会按预期方式遍历每篇article ，并将col-1 height设置为col-2的高度。

如果可能，请简要说明我哪里出了问题。

Answer 1

您需要在每篇article下查找col-2和col-1

$(function () {

    var article = $('section.inner-services article');

    $(article).each(function( index ) {

        var textColHeight = $(this).children('.col-2').height();
        var figureCol  = $(this).children('.col-1');
        $(figureCol).css('height', textColHeight);
        console.log(index);

    });

});

Answer 2

首先，一旦创建了jQuery对象，就无需再次创建它，因此不需要$(article) 。

在第二里面each可以参考当前元素为this 。

正确的代码可能如下所示：

$(function () {

    $('section.inner-services article').each(function( index ) {

        var textColHeight = $(this).find('.col-2').height();
        var figureCol  = $(this).find('.col-1').height(textColHeight);

        console.log(index);

    });

});