如果我有以下标记;
<div id="container"> <div id="box"> <div id='sameHeight'>One<br>two<br>three</div> <div id='sameHeight'>four</div> <div id='sameHeight'>five</div> <div> <div id="box"> <div id='sameHeight'>four</div> <div id='sameHeight'>six</div> <div id='sameHeight'>seven<br>eight</div> <div> </div>
如何确保标记为“sameHeight”的所有div与其他div中的div相同?
我看了一下equalHeights插件,但是假设并排的所有div都在同一个父节点中.我需要一个可以遍历父母或允许我指定父母的人.
有这样的事情还是我需要写它?
编辑
我似乎在我的解释中引起了一些混乱,所以我希望这会让事情变得清晰起来.
查看新标记,容器是一个简单的盒子.
“盒子”divs并排坐着.
然后每个sameheight div在其父级中位于另一个之下.
我试图解决的问题是让每个相同的高度匹配它的相对高度.
它应该看起来像一个网格我想用w / out使用网格.
我希望这有帮助.
编辑2
到目前为止,我想出的是有更好的方法吗?
function SetHeights() { var numLines = $('#container>div:eq(0) .sameHeight').length; for (var t = 0; t < numLines; t++) { var leftHeight = $('#container>div:eq(0) .sameHeight:eq(' + t + ')').outerHeight(); var rightHeight = $('#container>div:eq(1) .sameHeight:eq(' + t + ')').outerHeight(); if (leftHeight > rightHeight) { $('#container>div:eq(1) .sameHeight:eq(' + t + ')').css({ height: leftHeight }); } else { $('#container>div:eq(0) .sameHeight:eq(' + t + ')').css({ height: rightHeight }); } } }
解决方法
首先,您可能知道只有一个元素应该具有任何一个id属性.所以我已经改变了选择器,好像它们是下面的类的类.即使你可能不关心W3C标准,浏览器或JavaScript API等也可能依赖于这种行为而现在或将来都无法工作.
$(document).ready(function () { $('div.parentDiv > div').each(function() { var $sameHeightChildren = $(this).find('.sameHeight'); var maxHeight = 0; $sameHeightChildren.each(function() { maxHeight = Math.max(maxHeight,$(this).outerHeight()); }); $sameHeightChildren.css({ height: maxHeight + 'px' }); }); });
注意:如果你希望它们都是相同的高度,尽管它们是父div,这就是你想要的.
$(document).ready(function () { var $sameHeightDivs = $('.sameHeight'); var maxHeight = 0; $sameHeightDivs.each(function() { maxHeight = Math.max(maxHeight,$(this).outerHeight()); }); $sameHeightDivs.css({ height: maxHeight + 'px' }); });
这将它们设置为每个父div元素的最高高度.
此外,this answer可能会显示其他一些选项.
另请注意,如果内部内容再次更改(可能通过JavaScript),则需要再次调用它,或者将其放在我不建议的setInterval()中.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。