Установить наибольшее количество высот из нескольких элементов для всех элементов в Javascript

Question

Я должен получить высоты нескольких элементов (например: .content-one> .title) и установить самое высокое число для всех элементов.

<div class="content-one">
    <h3 class="title">Section One</h3>
</div>

<div class="content-two">
    <h3 class="title">Section Two</h3>
</div>

Это код, который я написал.

maxHeight('.content-one');
maxHeight('.content-two');

function maxHeight(element) {
    const contents = document.querySelectorAll(element);

    contents.forEach(function(content) {
        var title = content.getElementsByClassName('title')[0];

        if (title.clientHeight > 20) {
            title.style.height = 40 + "px";
            console.log("done");
        }
    });
}

Здесь он проверяет высоту и пытается установить высоту.Но он устанавливает высоту только для элементов с высотой> 20. Каково было бы лучшее решение для этого?

Answer 1

@Suresh.W, попробуйте с данным решением, с первым циклом вы должны получить максимальную высоту, а затем можете назначить ее для вашего элемента управления

$(document).ready(function(){
   maxHeight('.content-one');
maxHeight('.content-two');

function maxHeight(element) {
    const contents = document.querySelectorAll(element);
    var allHeight = [];
    var setheight= 40;
    contents.forEach(function(content) {
        var title = content.getElementsByClassName('title')[0];
        allHeight.push(title.clientHeight);
        if(Math.max(allHeight) > 20)
          setheight = 40;
        else
          setheight = Math.max(allHeight);
        
    });
    var elems = document.querySelectorAll(".title");
    var index = 0, length = elems.length;
    for ( ; index < length; index++) {
        elems[index].style.height =setheight + "px";  
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-one">
    <h4 class="title">Section One</h4>
</div>

<div class="content-two">
    <h3 class="title">Section Two</h3>
</div>

Answer 2

Спасибо всем за интерес.Я не мог привести примеры выше, как есть.Мне удалось найти и написать собственное решение.

$(document).ready(function() {
    maxHeight('.content-one');
    maxHeight('.content-two');

    function maxHeight(element) {
        const contents = document.querySelectorAll(element);
        var titleHeight = 0;

        contents.forEach(function(content) {
            var title = content.getElementsByClassName('title')[0];

            if (title.clientHeight > titleHeight) {
                titleHeight = title.clientHeight;
            }
        });

        contents.forEach(function(content) {
            var title = content.getElementsByClassName('title')[0];
            title.style.minHeight = titleHeight + "px";
        });
    }
});

Answer 3

Получить высоту первого элемента и записать ее в некоторую переменную (скажем, highest).Затем вы должны перебрать элементы и проверить if(highest < myNextElemHeight) {highest = myNextElemHeight}.После цикла вы получите наибольшее значение элемента, а затем в другом цикле вы можете установить для всех элементов максимальное значение highest.

Вы должны объявить highest вне (перед) цикла.