获取相同元素中的最大高度

最新推荐文章于 2024-06-21 14:38:23 发布

soosgo

最新推荐文章于 2024-06-21 14:38:23 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/Doulvme/article/details/72912071

jQuery 专栏收录该内容

21 篇文章

订阅专栏

有时候元素的高度是内容填充的，不能再css直接定义，但是如果高度不统一外观又不太好看，那么我们只能通过JS对

元素的高度进行控制了，本例子是通过jQuery对元素高度进行控制的，所以首先要引入jQuery文件。

附上代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>获取相同元素的最大高度</title>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<style type="text/css">
			html,body,div,ul,li p{
				margin: 0px;
				padding: 0px;
				font-size: 14px;
			}
			.wrap{
				width: 600px;
				margin: 50px auto;
			}
			.wrap ul{
				width: 100%;
				list-style: none;
				overflow: hidden;
			}
			.wrap ul li{
				float: left;
				width: 32%;
				margin: 0 0.5%;
				padding: 20px 0px 30px;
				border: 1px solid #EEEEEE;
			}
			.wrap ul li p{
				margin:0 10px
			}
			.wrap ul li p:first-child{
				font-size: 16px;
				line-height: 2;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<ul>
				<li>
					<p>标题一</p>
					<p>内容一内容一内容一内容一内容一内容一</p>
				</li>
				<li>
					<p>标题二</p>
					<p>内容二内容二内容二内容二内容二</p>
				</li>
				<li>
					<p>标题三</p>
					<p>内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三</p>
					<p>内容三内容三内容三内容三内容三内容三内容三内容三内容三内容三</p>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			$(function(){
				$(function(){
					var arr=[];
					for(var i=0;i<$('.wrap ul li').length;i++){
						arr.push($('.wrap ul li')[i].offsetHeight);
					}
					arr.sort(function(value1,value2){//排序
						return value2-value1;
					});
					$('.wrap ul li').height(arr[0]);
				});
			});
		</script>
	</body>
</html>