Question

我必须获得少数元素（例如：.content-one＆gt; .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");
        }
    });
}

在这里，它检查高度并尝试设置高度。但它只为高度> gt的元素设置了高度。 20.对此最好的解决办法是什么？

Answer 1

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

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

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

Answer 3

感谢所有人的兴趣。我不能上面的例子。我已设法提及＆amp;写我自己的解决方案。

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

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

3 个答案: