且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

jQuery等高和动态内容

更新时间:2023-12-05 08:08:40

('.content).each 块,然后你可以调用函数来在需要时重新调整高度均衡,例如当一个标签被点击时,例如

  $(document).ready(function(){

function equaliseIt(){
$('。内容')。each(function(){
var highestBox = 0;
$('。equalcontentcolumn',this).each(function(){
if($(this))。 height()> highestBox)
highestBox = $(this).height();
});

$('。equalcontentcolumn',this).height(highestBox );
});
}

//在页面加载时调用函数
equaliseIt();
});

您如何更改标签页?如果使用插件,您可能有权访问 tabchange 您是否正在使用插件或手动执行插件? 事件或类似的事件,这些事件在选项卡更改后将被触发,因此您可以使用它来调用 equaliseIt()函数



如果您要手动更改标签,只需在更改标签
后调用该功能即可

I found the following jQuery, and it works great for a page that does not have dynamic content in a grid loading on the page as you click from tab to tab. One tabbed section of the grid, the default, will adjust the equal height correctly with the below jQuery, but when the user then clicks on one of the other tabs to load other content into the grid (in which the grid is a lot more content), the equal height jQuery does not adjust, which results in the content in the grid explaning beyond the footer or other content outside and below the grid.

Can someone please help me with the provided jQuery so that it will adjust the equal height dynamically?

Thank you!

$(document).ready(function () {
    $('.content').each(function () {
        var highestBox = 0;
        $('.equalcontentcolumn', this).each(function () {
            if ($(this).height() > highestBox)
                highestBox = $(this).height();
        });

        $('.equalcontentcolumn', this).height(highestBox);
    });
});

If you wrap the $('.content).each block in a function, you can then call the function to reapply the height equalising when you need to, such as when a tab is clicked, e.g.

$(document).ready(function () {

    function equaliseIt() {
        $('.content').each(function () {
            var highestBox = 0;
            $('.equalcontentcolumn', this).each(function () {
                if ($(this).height() > highestBox)
                    highestBox = $(this).height();
            });

            $('.equalcontentcolumn', this).height(highestBox);
        });
    }

    //call the function at page load
    equaliseIt();  
});

How are you changing the tab? Are you using a plugin or doing it manually?

If using a plugin, you might have access to a tabchange event or similar, which will be fired after the tab is changed, so you can use that to call the equaliseIt() function

If you're changing the tabs manually, just call the function after changing the tab