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

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高度设置为col-2.

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

Answer 1

你需要寻找col-2并col-1在每个article

$(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);

    });

});