What I am trying to do is to get the heights of multiple elements with the same ‘class’. If the element’s height is over 400px I want it to set the height to the value it aquired minus 5px. And if it is under 400px I want it to do the same thing.
jQuery(document).ready(function( $ ){
var cardHeight = $('.card').height();
if (cardHeight > 400) {
$(this).height(cardHeight - 5);
}
else{
$(this).height(cardHeight - 5);
}
}); .wrapper {
width: 100%;
overflow: hidden;
}
.wrapper .card {
width: 20%;
float: left;
margin: 10px;
background-color: red;
}
.wrapper .card:nth-child(1) {
height: 333px;
}
.wrapper .card:nth-child(2) {
height: 333px;
}
.wrapper .card:nth-child(3) {
height: 500px;
}
.wrapper .card:nth-child(4) {
height: 500px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<body>
<div class="wrapper">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</body>