是否有一种方法可以检测一行何时用浮动LIs的UL进行更改？
是否有一种方法可以检测一行何时用浮动LIs的UL进行更改？
提问于 2015-03-21 03:01:14
下面是我的产品示例列表：http://imgur.com/7IGthIa
我有一个函数，可以在文档上运行，循环遍历每个列表，并调整img周围跨度的高度，这样整个列表的空间都是一致的。
我想知道的是，是否有一种方法可以让它检测“行”何时发生变化，这样跨度就会出现在--在第一行上(因为它们根据前两行进行适当的大小调整，但是在第二行上，只有一个条目，跨度就是图像的高度？)
这个函数对LI元素的高度做同样的事情，如果有一个可行的解决方案，我可能也会调整它来调整每一行的大小。
这是它运行的计算高度的函数，如果它有任何用处的话：
if ( jQuery('.product_list').length ) {
var tallest = 0;
var tallest_img = 0;
jQuery('.product_list li').each( function() {
if ( jQuery(this).height() > tallest ) { tallest = jQuery(this).height(); }
if ( jQuery(this).children('a').children('span').children('img').height() > tallest_img ) {
tallest_img = jQuery(this).children('a').children('span').children('img').height();
}
});
jQuery('.product_list li').height( tallest );
jQuery('.product_list li span').height( tallest_img );
}谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-03-21 12:58:11
您可以通过检查元素的offset().top来检测行何时更改。
由于您在span上设置了高度，我将假设它们具有display: inline-block的样式。(不能设置内联元素的高度。)
因为span是li的子代，所以您不必担心设置li高度(除非我误解了您的问题)。
此代码遍历span，根据每一行中最高的img给它们每一行的等高：
function sizeSpans() {
var spans= $('ul span'),
tallest,
top= $(spans[0]).offset().top;
spans.css('height', '');
tallest= $(spans[0]).height();
spans.each(function(idx1) {
if($(this).offset().top === top) {
tallest= Math.max(tallest, $(this).height());
spans.each(function(idx2) {
if(idx2 <= idx1 &&
$(this).offset().top === top
) {
$(this).css('height', tallest);
}
});
}
else {
tallest= $(this).height(),
top= $(this).offset().top;
}
});
} //sizeSpans您可以将其添加到resize处理程序中：
$(window).resize(sizeSpans);单击顶部的Size spans按钮。调整框架的大小以查看大小的调整。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29179183
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号