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=".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>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/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>- 1 Please edit your question to contain a minimal reproducible example. Links to code on other sites are not appropriate. Please also describe the problem in terms of what you expect to happen vs what actually happens – Phil Commented Apr 1 at 0:23
2 Answers
Reset to default 4In the original version of the code, the problem is in the moment when height() is taken immediately. The value of cardHeight = the height of the 1st element with the card class, you can verify this by setting the following value in the styles:
&:nth-child(1) {
height: 111px;
}
&:nth-child(2) {
height: 222px;
}
&:nth-child(3) {
height: 333px;
}
&:nth-child(4) {
height: 444px;
}
cardHeight will be equal to 111px in this case.
If you need to go through several elements with the same classes, you can use each. And then do the necessary manipulations with each element.
jQuery(document).ready(function($) {
$('.card').each(function(index, element) {
var cardHeight = $(element).height();
console.log(cardHeight);
if (cardHeight > 400) {
$(element).height(cardHeight - 5);
} else {
$(element).height(cardHeight - 5);
}
});
});
The if/else conditions themselves are redundant in this case.
jQuery(document).ready(function($) {
$('.card').each(function(index, element) {
var cardHeight = $(element).height();
console.log(cardHeight);
$(element).height(cardHeight - 5);
});
});
I can see two problems in your approach:
The height assigned to the
cardHeightvariable is the height of the first element with class ascard. In order to capture each and every element with classcard, you should use the$.each()function of jQuery.The if/else conditions have same statement inside them, so you can omit it.
So, the correct code would be:
jQuery(document).ready(function($) {
$('.card').each(function(index, ele) {
var cardHeight = $(ele).height();
$(element).height(cardHeight - 5);
});
});
Hope this helps.