2

Мне нужно создать массив класса .tab_p, потом получить каждого из них высоту и назначить всем элементам данного класса наибольшую высоту. Проблема в том, что массив вроде как создается, но высота почему-то считается только первого элемента, а остальные элементы в массиве имеют нулевую высоту. Вот код:

var arr_height = $(".tab_p");
        for(var i = 0; i < arr_height.length; i++){
            var frst_height = $(".frst_p").height();
            var new_height = $(arr_height[i]).height();
            if(new_height > frst_height){
                $(".tab_p").height(new_height);
            }
        }

Код html

<div class="tab_content">
            <div id="tab1" class="tab active_tab_content">
                <p class="tab_p">1</p>
            </div>
            <div id="tab2" class="tab">
                <p class="tab_p">22</p>
            </div>
            <div id="tab3" class="tab">
                <p class="tab_p">333</p>
            </div>
            <div id="tab4" class="tab">
                <p class="tab_p">4444</p>
            </div>
            <div id="tab5" class="tab">
                <p class="tab_p">55555</p>
            </div>
        </div>

В переменную new_height заносится значение первого элемента (275px), следовательно все элементы класса .tab_p получают 275pх.

3
  • Пожалуйста, учтите Ваши ошибки: не масив, а массив, не следыватльно, а следовательно, не елементы, а элементы. 15 янв 2018 в 14:38
  • @Pavel Osypov А вот эти .tab_p скорее всего располагаются вместе, вряд? И наверняка у них есть элемент-родитель?
    – Kirill
    15 янв 2018 в 16:32
  • Извините, исправлюсь)) 16 янв 2018 в 20:47

2 ответа 2

3

Не знаю угадал или нет, но кажется вам просто надо обернуть все .tab_p в родителя с display:flex

var maxHeight = 0;
$(".tab_p").each(function(){
  var itemHeight = $(this).height();
  if (itemHeight > maxHeight)
    maxHeight = itemHeight;
});
$(".tab_p").css("height", maxHeight + "px");
#tab_p-wrapper {
  display: flex;
}

.tab_p {
  width: 30px;
  border: 1px solid black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tab_p-wrapper">
  <div class="tab_p">qwe qwe</div>
  <div class="tab_p">qwe qwe qwe qwe qwe</div>
  <div class="tab_p">qwe qwe qwe</div>
</div>

2

function SetMaxHeight() {
  var maxHeight = 0;
  $(".tab_p").each(function() {
    var itemHeight = $(this).height();
    if (itemHeight > maxHeight)
      maxHeight = itemHeight;
  });
  $(".tab_p").css("height", maxHeight + "px");
}
p {
  border: 1px black solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="SetMaxHeight()">Click</button>
<div class="tab_content">
  <div id="tab1" class="tab active_tab_content">
    <p class="tab_p">1</p>
  </div>
  <div id="tab2" class="tab">
    <p class="tab_p">22</p>
  </div>
  <div id="tab3" class="tab">
    <p class="tab_p" style="height:50px;">333</p>
  </div>
  <div id="tab4" class="tab">
    <p class="tab_p">4444</p>
  </div>
  <div id="tab5" class="tab">
    <p class="tab_p">55555</p>
  </div>
</div>

3
  • кто минусует рабочий ответ? Проявись.
    – Kirill
    15 янв 2018 в 16:38
  • К сожалению результат тот же что и у меня. Все блоки получили высоту первого. Я добавил html, раньше нужно было... 16 янв 2018 в 20:44
  • @PavelOsypov Вы, наверное, неаккуратно код к себе скопировали :).
    – user176262
    16 янв 2018 в 20:51

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.