Jquery Как задать каждому блоку его текущую высоту?
Нужно чтоб скрипт присваивал каждой колонке .col его текущую высоту! Сейчас он присваивает высоту первого блока! Подскажите что исправить, спасибо.
var height = $('.col').height();
$('.col').each(function() {
$(this).css('min-height', height);
});.row {
display: flex;
align-items: flex-start;
}
.col {
width: 300px;
background: blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col">lorem ipsum lorem</div>
<div class="col">lorem ipsum lorem ipsum</div>
<div class="col">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</div>
<div class="col">lorem ipsum lorem ipsum</div>
<div class="col">lorem ipsum lorem ipsum</div>
<div class="col">lorem ipsum lorem ipsum</div>
<div class="col"> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</div>
<div class="col"> lorem ipsum</div>
</div>Ответы (1 шт):
Автор решения: UModeL
→ Ссылка
Исходя из вопроса, должно быть так:
$('.col').each(function() {
$(this).css('min-height', $(this).height());
});.row {
display: flex;
align-items: flex-start;
}
.col {
width: 300px;
background: blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col">lorem ipsum lorem</div>
<div class="col">lorem ipsum lorem ipsum</div>
<div class="col">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</div>
<div class="col">lorem ipsum lorem ipsum</div>
<div class="col">lorem ipsum lorem ipsum</div>
<div class="col">lorem ipsum lorem ipsum</div>
<div class="col"> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</div>
<div class="col"> lorem ipsum</div>
</div>Но, что-то мне подсказывает, что Вам нужна высота со значением max-content :
.row {
display: flex;
align-items: flex-start;
}
.col {
height: max-content;
width: 300px;
background: blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col">lorem ipsum lorem</div>
<div class="col">lorem ipsum lorem ipsum</div>
<div class="col">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</div>
<div class="col">lorem ipsum lorem ipsum</div>
<div class="col">lorem ipsum lorem ipsum</div>
<div class="col">lorem ipsum lorem ipsum</div>
<div class="col"> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</div>
<div class="col"> lorem ipsum</div>
</div>