javascript - 使用 jQuery 不工作创建等高列

Question

我正在使用 jQuery 使列表项的高度相等(找到最高的，并使所有列表项都等于该高度)。

但是代码无法识别每列中的任何内容来设置高度。它只识别我拥有的 8px border-top，并将每列的高度设置为 8px。我需要代码来识别列中的内容(一些 h 标签和 p 标签)，找到最高的列，并使所有列都等于该列。

$('#secondary').each(function(){  

        var highestBox = 0;
        $('.degreeCardInner', this).each(function(){

            if($(this).height() > highestBox) 
               highestBox = $(this).height(); 
        });  

        $('.degreeCardInner',this).height(highestBox);         

    });

请看这个例子:JSFiddle

单击学位类别可进入我正在谈论的屏幕。我试图让每个#degreeCardInner 注册一个考虑到其中所有内容的高度。

代码似乎可以工作，但只能识别我在#degreeCardInner 上的 8px 边框顶部，而不是其中的内容。

我需要在 css 中添加什么才能使它正常工作吗？

Answer 1

这是因为当 #secondary 设置为 display:none;(没有要计算的高度)时，您是在页面加载时设置高度。

一个可能的解决方案可能是将您的动态高度代码分解成它自己的函数，并在第一次显示 #secondary 时调用它一次。

更新的 javascript:

$(document).ready(function(){

    ...
    $('#category li').on('click', function () {
            $('#main').addClass('hidden');
            $('#secondary').addClass('visible');
            if(!$('#secondary').data('heightSet'))
               setHeights();
        });
});

    function setHeights() {
        $('#secondary').each(function () {
            var highestBox = 0;
            $('.degreeCardInner', this).each(function () {
                if ($(this).height() > highestBox) highestBox = $(this).height();
            });
            $('.degreeCardInner', this).height(highestBox);
        });
        $('#secondary').data('heightSet', true);
    }

查看此 Fiddle用于演示。