1

基本上我有一个带有图像的无序列表。我正在使用 jquery 来确保所有 li 标签占用相同数量的垂直空间。但是，我的网站是流畅的，我希望我的 jquery 在页面加载以及浏览器窗口调整大小时调整 li 标签的大小。我使用了以下解决方案，我相信它应该可以工作，并且在阅读了其他成功完成类似事情的线程之后，我不明白为什么我的代码没有在窗口调整大小时触发。

这是您可以看到 li 标签不随页面调整大小的站点（除非您刷新）：http ://www.webedify.com/sse/type.html

我的 HTML：

<ul class="img-results">
    <li><a href="#"><img src="img.jpg" alt=""></a></li>
    <li><a href="#"><img src="img.jpg" alt=""></a></li>
    <li><a href="#"><img src="img.jpg" alt=""></a></li>
    <li><a href="#"><img src="img.jpg" alt=""></a></li>
 </ul>

我的 jQuery：

var imght = function () {
        var maxHeight = -1;
        $('ul.img-results li').each(function() {
            maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
        });
        $('ul.img-results li').each(function() {
            $(this).height(maxHeight);
        });
    };

    $(document).ready(imght);
    $(window).resize(imght);

我错过了什么？我觉得它很小而且可能很明显，我只是没有看到它。谢谢你的帮助。

4

1 回答 1

1

问题是一旦你指定了高度，浏览器调整大小将不再改变高度。高度将保持您指定的高度。在尝试找到新高度之前删除旧高度。

var imght = function () {
        var maxHeight = -1;
        var uls=$('ul.img-results li');
        uls.css({'height':'auto'});
        uls.each(function() {
            maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
        });
        uls.each(function() {
            $(this).height(maxHeight);
        });
    };
于 2013-07-09T16:55:24.027 回答