'Loop through each div of containers and compare the height index wise

Really sorry if there is any mistake in typo for title. But I need help in looping through 2 main divs and their child divs too. Here is the code sample:

<div class="containers">
    <div class="columns">Content 1</div>
    <div class="columns">Content 2</div>
    <div class="columns">Content 3</div>
</div>
<div class="containers">
    <div class="columns">Content 1</div>
    <div class="columns">Content 2</div>
    <div class="columns">Content 3</div>
</div>

What I need is that jquery loop through first .containers and get the height of first child and then loop to second .containers and get the height of first child and compare both height and apply which one is max height to both first elements of .containers. Now go to second indexes of .containers, compare the height and apply maximum height to both second indexes and so on.

jqueryloopsfor-loopforeacheach


Solution 1:[1]

Try this

$(document).ready(function() {
    let $container2Columns = $('#container2 .columns');

    $('#container1 .columns').each(function(i){
        let $relatedColumn = $container2Columns.eq(i);
        let maxHeight      = Math.max($(this).height(), $relatedColumn.height());

        $(this).height(maxHeight);
        $relatedColumn.height(maxHeight);
    });
});
.columns {
    width: 100px;
    background: #000;
    display: inline-block;
    margin: 0 5px 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="containers" id="container1">
    <div class="columns" style="height: 100px;">Content 1</div>
    <div class="columns" style="height: 400px;">Content 2</div>
    <div class="columns" style="height: 300px;">Content 3</div>
</div>
<div class="containers" id="container2">
    <div class="columns" style="height: 150px;">Content 1</div>
    <div class="columns" style="height: 200px;">Content 2</div>
    <div class="columns" style="height: 300px;">Content 3</div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ruleboy21

Related Questions