在jQuery不起作用的情况下创建等高列

Question

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

但是代码不能识别每列中用于设置高度的任何内容。它只识别我有的8px的顶部边框，并将每列的高度设置为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。

Answer 2

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

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

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

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

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

}).click(function () {
    onShow();
});

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

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

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

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

    });
}