Égalisation des hauteurs avec Jquery after event

Question

Je développe un site qui analyse les flux RSS et les affiche dans une série de divs. Après le chargement de tous les flux, j'aimerais exécuter une fonction jquery qui prend la hauteur de la div la plus haute et règle toutes les divs à cette hauteur. Vous pouvez consulter le site ici : http://vitaminjdesign.com/adrian/

Actuellement, j'utilise la méthode jquery plugin equal heights décrites ci-dessous :

function equalHeight(group) {
    var tallest = 0;
    group.each(function() {
        var thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}

et vous pouvez l'appeler avec :

$(document).ready(function() {
$(".block").equalHeights(); 
});

Cela ne fonctionne pas correctement (la hauteur de toutes les divisions est égale à la hauteur de la division la plus haute). AVANT le flux rss se charge), probablement en raison du fait que je dois utiliser un gestionnaire d'événement en direct ? Quelqu'un sait-il comment je peux faire en sorte que les hauteurs soient égales une fois que tout est complètement chargé ?

Answer 1

Vous devez appeler equalHeight lorsque l'AJAX est terminé. Vous avez deux options : (a) effectuer l'appel après le chargement de chaque élément ou (b) effectuer l'appel une fois que tous les éléments sont chargés. equalHeight n'a pas l'air d'exiger beaucoup de ressources, alors autant faire l'appel à chaque fois.

Il suffit donc d'ajouter equalHeight($(".block")); à la success de chaque appel AJAX.

$.ajax({
    url: 'someurl.rss',
    success: function(){
        // your code to insert the relevant content

        equalHeight($(".block")); // insert this at the end of each call to the RSS files
    }
});

---

Une autre solution, légèrement plus intensive, mais plus simple en termes de code, consiste à utiliser ajaxSuccess pour exécuter une fonction après chaque appel AJAX :

$(document).ajaxSuccess(function(){
    equalHeight($(".block"));
});