javascript - 获取最大高度 - JQuery

<分区>

你好我有一个包含不同内容的三段所以我需要的是首先获取任何段落的高度然后使所有段落的高度等于最大高度:

这里是我的简单代码:

$(document).ready(function () {
    $('.my-container p').each(function (index, element) {
        alert($(this).height());
    });
})

* {
    -moz-box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
}
.my-container{
    width:700px;
    margin:50px auto;
    padding:20px;
}
.my-container p{
    margin: 0 0 20px;
    padding:10px;
    border:1px solid #00fb88;
}
.my-container p span{
    color:#00fb88;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="my-container">
        <p>
            <span>Paragraph One</span>
            Lorem ipsum dolor sit amet consectetuer adipiscing elit am nibh unc varius facilisis eros ed erat in in velit quis arcu ornare laoreet urabitur adipiscing luctus massa nteger ut purus ac augue commodo commodo unc nec mi eu justo tempor consectetuer tiam.  Lorem ipsum dolor sit amet consectetuer adipiscing elit am nibh unc varius facilisis eros ed erat in in velit quis arcu ornare laoreet urabitur adipiscing luctus massa nteger ut purus ac augue commodo commodo unc nec mi eu justo tempor consectetuer tiam.
        </p>
        <p>
            <span>Paragraph Two</span>
            Lorem ipsum dolor sit amet consectetuer adipiscing elit am nibh unc varius facilisis eros ed erat in in velit quis arcu ornare laoreet urabitur adipiscing luctus massa nteger ut purus ac augue commodo commodo unc nec mi eu justo tempor consectetuer tiam.
        </p>
        <p>
            <span>Paragraph Three</span>
            Lorem ipsum dolor sit amet consectetuer adipiscing elit am nibh unc varius facilisis eros ed erat in in velit quis arcu ornare laoreet urabitur adipiscing luctus massa nteger ut purus ac augue commodo commodo unc nec mi eu justo tempor consectetuer tiam.
        </p>
    </div>

最佳答案

不是最好的性能但最简单的是这样的:

$(document).ready(function () {
    
    var biggestHeight = 0; // change this number to define a min-height

    // loop over every box to find the height
    $('.my-container p').each(function (index, element) {
        var currentBoxHeight = $(this).outerHeight(); // get each boxes height
        // compare the height and store as new biggest height if needed
        biggestHeight = currentBoxHeight >= biggestHeight ? currentBoxHeight : biggestHeight;
    });

    $('.my-container p').css('height', biggestHeight + 'px');
})

* {
    -moz-box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
}
.my-container{
    width:700px;
    margin:50px auto;
    padding:20px;
}
.my-container p{
    margin: 0 0 20px;
    padding:10px;
    border:1px solid #00fb88;
}
.my-container p span{
    color:#00fb88;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="my-container">
        <p>
            <span>Paragraph One</span>
            Lorem ipsum dolor sit amet consectetuer adipiscing elit am nibh unc varius facilisis eros ed erat in in velit quis arcu ornare laoreet urabitur adipiscing luctus massa nteger ut purus ac augue commodo commodo unc nec mi eu justo tempor consectetuer tiam.  Lorem ipsum dolor sit amet consectetuer adipiscing elit am nibh unc varius facilisis eros ed erat in in velit quis arcu ornare laoreet urabitur adipiscing luctus massa nteger ut purus ac augue commodo commodo unc nec mi eu justo tempor consectetuer tiam.
        </p>
        <p>
            <span>Paragraph Two</span>
            Lorem ipsum dolor sit amet consectetuer adipiscing elit am nibh unc varius facilisis eros ed erat in in velit quis arcu ornare laoreet urabitur adipiscing luctus massa nteger ut purus ac augue commodo commodo unc nec mi eu justo tempor consectetuer tiam.
        </p>
        <p>
            <span>Paragraph Three</span>
            Lorem ipsum dolor sit amet consectetuer adipiscing elit am nibh unc varius facilisis eros ed erat in in velit quis arcu ornare laoreet urabitur adipiscing luctus massa nteger ut purus ac augue commodo commodo unc nec mi eu justo tempor consectetuer tiam.
        </p>
    </div>

关于javascript - 获取最大高度 - JQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43226739/

上一篇：html - 嵌套表格中的 CSS 优先级

下一篇：html - 内容与 html 中的标题重叠

相关文章：

javascript - jquery改变图像高度将图像更改为错误的高度

jquery - 滚动到此元素覆盖时无法使元素滚动

javascript - 启用 javascript 的浏览器是否承认 noscript？

html - 设置 <iframe> 的 HTTP 请求类型

javascript - 使用 Canvas 和 JavaScript 进行多边形表示的图像采样算法？

javascript - 使用 UglifyJS (Brunch) 压缩 Object.prototype.functions

javascript - 从 Json 中获取条件值，将唯一值分组

javascript - 如何在 JavaScript 中销毁 session

javascript - 有没有办法组合两个保证同步的可观察量？

jquery - 在单个链接上切换类？