Hauteurs jQuery égales et contenu dynamic

J’ai trouvé le jQuery suivant, et cela fonctionne très bien pour une page qui n’a pas de contenu dynamic dans une grid qui se charge lorsque vous cliquez d’un onglet à l’autre. Un onglet de la grid, la valeur par défaut, ajustera correctement la hauteur égale avec le jQuery ci-dessous, mais lorsque l’utilisateur cliquera sur l’un des autres tabs pour charger un autre contenu dans la grid (dans lequel la grid est beaucoup plus riche) ), l’égale hauteur jQuery ne s’ajuste pas, ce qui explique que le contenu de la grid s’explique au-delà du pied de page ou de tout autre contenu situé en dehors et au-dessous de la grid.

Quelqu’un peut-il s’il vous plaît m’aider avec le jQuery fourni afin qu’il puisse ajuster la hauteur égale dynamicment?

Je vous remercie!

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

Si vous $('.content).each bloc $('.content).each dans une fonction, vous pouvez alors appeler la fonction pour réappliquer l’égalisation de hauteur lorsque vous en aurez besoin, par exemple lorsqu’un clic est effectué sur un onglet, par exemple

 $(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(); }); 

Comment changez-vous l’onglet? Utilisez-vous un plugin ou le faites-vous manuellement?

Si vous utilisez un plug-in, vous pouvez avoir access à un événement tabchange ou similaire, qui sera déclenché après la modification de l’onglet. Vous pouvez donc l’utiliser pour appeler la fonction equaliseIt() .

Si vous modifiez manuellement les tabs, appelez simplement la fonction après avoir modifié l’onglet.

Vous devez append ce code / cette fonction à l’événement change-tab. parce que ce code ne sera exécuté que lors du chargement.