Question

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

我试过了：

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

    });

});

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

2 个答案: