相同高度的div在不同的容器中

Question

So I am trying to set equal height for divs that are in different containers. But I am missing something and can't get it to work. Maybe you will spot the problem?

 var howMany = $('.comparison-table__labels-wrap .equal-row').length; for (var i=0; i<howMany; i++) { var firstBlock = 'equal-row-' + i; var firstHeight = $(firstBlock).height(); var secondBlock = '.equal-row-' + i + '-child'; var secondHeight = $(secondBlock).height(); if (firstHeight < secondHeight) { $(firstBlock).css("height", secondHeight); } else { $(secondBlock).css("height", firstHeight); } } 

 .row { border-color: #232323; border-width: 1px; border-style: solid; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container-1"> <div class="row equal-row-0">Row 0</div> <div class="row equal-row-1">Row 1</div> <div class="row equal-row-2">Row 2</div> <div class="row equal-row-3">Row 3</div> <div class="row equal-row-4">Row 4</div> <div class="row equal-row-5">Row 5</div> <div class="row equal-row-6">Row 6</div> </div> <div class="container-2"> <div class="row equal-row-0-child">Row 0</div> <div class="row equal-row-1-child">Row 1</div> <div class="row equal-row-2-child">Row 2</div> <div class="row equal-row-3-child">Row 3</div> <div class="row equal-row-4-child">Row 4</div> <div class="row equal-row-5-child">Row 5</div> <div class="row equal-row-6-child">Row 6</div> </div> 

Answer 1

I think you need $('[class^="equal-row"]') to select all divs that you need. See this:

 function setNewHeight() { var howMany = $('[class^="equal-row"]').length; //console.log(howMany); for (var i = 0; i < howMany; i++) { var firstBlock = '.equal-row-' + i; var firstHeight = $(firstBlock).height(); //console.log(firstBlock, firstHeight); var secondBlock = '.equal-row-' + i + '-child'; var secondHeight = $(secondBlock).height(); //console.log(secondBlock, secondHeight); if (firstHeight < secondHeight) { $(firstBlock).css("height", secondHeight); } else { $(secondBlock).css("height", firstHeight); } } } setNewHeight(); 

 .container-1 div, .container-2 div{ border: 1px solid #ccc } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <div class="container-1"> <div class="container-1"> <div class="equal-row-0">Row 0 <br> test1 </div> <div class="equal-row-1">Row 1</div> <div class="equal-row-2">Row 2</div> <div class="equal-row-3">Row 3</div> <div class="equal-row-4">Row 4 <br>test2 </div> <div class="equal-row-5">Row 5</div> <div class="equal-row-6">Row 6</div> </div> <div class="container-2"> <div class="equal-row-0-child">Row 0</div> <div class="equal-row-1-child">Row 1</div> <div class="equal-row-2-child">Row 2</div> <div class="equal-row-3-child">Row 3</div> <div class="equal-row-4-child">Row 4</div> <div class="equal-row-5-child">Row 5</div> <div class="equal-row-6-child">Row 6 <br>test3 </div> </div> 

Answer 2

funny example ;)

 function equalizeHeights() { const firstDivs = document.querySelectorAll(".first div") const secondDivs = document.querySelectorAll(".second div") const heights = [] for (let div of firstDivs) { heights.push(div.clientHeight) } for (let i = 0; i < heights.length; i++) { secondDivs[i].style.height = heights[i] + "px" } } equalizeHeights() function randomlyChangeHeight() { const divs = document.querySelectorAll(".first div") const randomNum = Math.floor(divs.length * Math.random()) const randomHeight = Math.floor(50 + 100 * Math.random()) divs[randomNum].style.height = randomHeight + "px" } setInterval(() => { randomlyChangeHeight(); }, 500) setTimeout( () => setInterval(equalizeHeights, 250), 250) 

 .first div { height: 50px; } div div { transition: height 500ms; border: 1px solid goldenrod; text-align: center; padding: 20px; box-sizing: border-box; } .first, .second { width: 50%; float: left; } .first div:nth-child(odd), .second div:nth-child(even) { background-color: mediumseagreen; } 

 <div class="first"> <div>Row</div> <div>Row</div> <div>Row</div> <div>Row</div> <div>Row</div> </div> <div class="second"> <div>Row</div> <div>Row</div> <div>Row</div> <div>Row</div> <div>Row</div> </div> 

Answer 3

Its way better to use an abstract class in the elements. And you can do the number definition in a different attribute. This will make the implementation much easier. See the example bellow:

 $('.equal-row').each(function () { var number = $(this).attr('rel'); var parentHeight = $(this).height(); $('.equal-row-child[rel='+number+']').height(parentHeight) }); 

 .container-1 .equal-row[rel="0"] { height: 30px; } .container-1 .equal-row[rel="1"] { height: 45px; } .container-1 .equal-row[rel="2"] { height: 15px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <div class="container-1"> <div rel="0" class="equal-row">Row 0</div> <div rel="1"class="equal-row">Row 1</div> <div rel="2" class="equal-row">Row 2</div> </div> <div class="container-2"> <div rel="0" class="equal-row-child">Row 0</div> <div rel="1"class="equal-row-child">Row 1</div> <div rel="2" class="equal-row-child">Row 2</div> </div> 

If you have any problems, let me now :)

Answer 4

So this works just fine:

    (function(){
        var howManyCols = $('.comparison-table__labels-wrap .equal-row').length;
        for (var i=0; i<howManyCols; i++) {
            var height1 = $('.equal-row-' + i).outerHeight();
            var col1 = $('.equal-row-' + i);

            var height2 = $('.equal-row-' + i + '-child').outerHeight();
            var col2 = $('.equal-row-' + i + '-child');

            if(height1 < height2) {
                $(col1).css("height", height2);
            } else {
                $(col2).css("height", height1);
            }            
        }
    })();