jQuery等高和动态内容 [英] jQuery Equal Heights and Dynamic Content

问题描述

我找到了下面的jQuery，它适用于在页面上加载页面时没有动态内容的页面。网格中的一个选项卡部分（默认值）会使用下面的jQuery正确调整相等的高度，但是当用户点击其他选项卡之一以将其他内容加载到网格中时（网格中的内容更多），相等的高度jQuery不会调整，这会导致网格中的内容在页脚之外或网格之外和之下的其他内容中进行解释。

有人可以帮忙我提供的jQuery，以便它将动态调整相等的高度？

谢谢！

  $（document）.ready（function（）{
 $（'。content'）。each（function（）{
 var highestBox = 0; 
 $ （'.equalcontentcolumn'，this）.each（function（）{
 if（$（this）.height（）> highestBox）
 highestBox = $（this）.height（）; 
 
 $（'。equalcontentcolumn'，this）.height（highestBox）; 
}）; 
}）; 
  

解决方案

（'.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

这篇关于jQuery等高和动态内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！