不同容器中的高度均等

Question

所以我想为不同容器中的div设置相同的高度。但我错过了一些东西，无法让它工作。也许你会发现问题？

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

我想你需要$('[class^="equal-row"]')选择你需要的所有div。看到这一点：

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

它的方式更好的元素，使用抽象类。您可以在不同的属性中进行数字定义。这将使执行更容易。参见下文的例子：

$('.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>

如果您有任何问题，现在让我:)

Answer 3

有趣的例子;）

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 4

所以这工作得很好：

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