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 border-top，而不是内容中的内容。

我需要添加一些内容才能使这项工作成功吗？

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。

Answer 2

它无法找到正确的元素，因为它们是隐藏的，所以这里是对代码的一个小调整， Instead of running the function on load run it on click of the first function

serverName

使用jQuery创建相同高度的列不起作用

2 个答案: