将少数元素的最高高度设置为Javascript中的所有元素答案

【问题标题】：Set the highest number of heights of few elements to all the elements in Javascript将少数元素的最高高度设置为Javascript中的所有元素
【发布时间】：2018-06-06 16:09:22
【问题描述】：

我必须获取少数元素的高度（例如：.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 的元素设置高度。对此最好的解决方案是什么？

【问题讨论】：

为什么 40 是这里的“最高数字”？如果这显然不是您想要的，为什么还有if？
@Luca 这是我找到的最佳解决方案。我想设置最高值。

标签： javascript foreach height

【解决方案1】：

获取第一个元素的高度并将其写入某个变量（比如说highest）。然后你必须遍历元素并检查if(highest < myNextElemHeight) {highest = myNextElemHeight}。在循环之后，您将获得元素的最高值，然后在另一个循环中，您可以将所有元素的最高值设置为 highest 值。

你必须在循环之外（之前）声明highest。

【讨论】：

【解决方案2】：

@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>

【讨论】：

这是完美的工作。但问题是这为所有具有 .title 类的元素设置了高度。它应该只在 .content-one 或 .content-two 中设置 .title 元素
所以如果高度是 18px，那么如果我调用 maxHeight('.content-one') 和调用 maxHeight('.content -two') .content-one, .title 一样的高度会有吧？

【解决方案3】：

感谢大家的关注。我不能按原样举出上面的例子。我已经设法参考并编写了自己的解决方案。

$(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";
        });
    }
});

【讨论】：