Setting Height of Element by target(should consider/detect byRow)

[Nukro]

Hello Guys

I am trying to set the height of some divs to a specific target. At the first I am setting the height for the prospective target div.

$('.wrapper').matchHeight();

Now I want to set the height of my other divs by the height of the wrapper element. So I use the target option:

$('.kennzahlen > .dekobild').matchHeight({ target: $('.wrapper') });

This works only for the first row. It always takes the height of the first wrapper element he finds. It doesn't consider the height of the wrapper per row. Is it possible to achieve this somehow?

[liabru]

This is the expected behaviour of the target option, it sets every selected element to the first matched target element. There's currently no built in option for target to work by row.

You should maybe take a look at the rows function and make a copy, then iterate the rows and apply matchHeight to the row with the target selected from the row.

[Nukro]

Thanks for your answer.

I have tried this, but this doesn't really work:

var rows = $.fn.matchHeight._rows($('.wrapper'));

$.each(rows, function(i, row) { row.matchHeight(); row.parent().siblings(".kennzahlen > .dekobild").matchHeight({target: row}); });

My Markup looks like this:

[skillmatic-co]

@Nukro I think you were close.

Here's what I did that worked:

var rows = $.fn.matchHeight._rows($('.row'));

$.each(rows, function(i, row) {
    $matchTarget = row.closest('.wrap').find('.target');
    row.matchHeight({
        target: $matchTarget
    });
});

And html would look like this:

<div class="wrap">
    <div class="row">
        Some Content
    </div>
    <div class="row target">
        Some Other Content
    </div>
</div>