Un rappel au rappel de $ .each()?

Question

Mise à jour: Le code ci-dessous fonctionne effectivement comme prévu, et accomplit le code que je voulais. Ma confusion était de comprendre ce que j'avais dans mon balisage en écrivant le code ci-dessous - après avoir donné un second coup d'œil à mon balisage, j'ai réalisé que mon code fonctionnait parfaitement.

J'ai fourni my answer below pour tous ceux qui sont intéressés par l'explication plus approfondie.

---

Je suis en train de retarder une action qu'après un cycle .each de $() a terminé, mais ne peut pas sembler le faire fonctionner. Plus précisément, je parcours une série de DIV pour déterminer le plus grand, puis je règle la hauteur de tous à cette valeur, mais je dois attendre d'avoir la valeur la plus élevée avant de pouvoir définir la hauteur des autres:

/* Fixing Module Heights */ 
$("div.module-box").each(function(){ 
    maxHeight = 0; 
    $("div.module-body", this).each(function(){ 
    currentHeight = $(this).height(); 
    if (currentHeight > maxHeight) maxHeight = currentHeight; 
    }); 
    $("div.module-body", this).css("height", maxHeight); 
}); 

il faut transformer:

<div class="module-box"> 
    <div style="height:75px" class="module-body">Hello World</div> 
    <div style="height:10px" class="module-body">Hello World</div> 
</div> 
<div class="module-box"> 
    <div style="height:50px" class="module-body">Hello World</div> 
    <div style="height:13px" class="module-body">Hello World</div> 
</div> 

Dans ceci:

<div class="module-box"> 
    <div style="height:75px" class="module-body">Hello World</div> 
    <div style="height:75px" class="module-body">Hello World</div> 
</div> 
<div class="module-box"> 
    <div style="height:50px" class="module-body">Hello World</div> 
    <div style="height:50px" class="module-body">Hello World</div> 
</div> 

Answer 1

Il n'y a pas de problème ici. Le code fourni ici fonctionne parfaitement avec le balisage fourni ici. Le problème était avec mon balisage local; il n'a pas été exactement le même que le balisage prévu ici pour tenter de simplifier le balisage:

<div class="module-row"> 
    <div class="module-box"> 
    <div class="module-body"> 
     <p>Hello World</p> 
    </div> 
    </div> 
    <div class="module-box"> 
    <div class="module-body"> 
     <p>Hello World</p> 
    </div> 
    </div> 
</div> 

Notez ici dans mon exemple, il n'y a qu'un seul .module-corps dans chaque module boîte. Pour cette raison, le .each() était en train de définir la hauteur du corps du module à quoi que ce soit d'abord.

Ce que j'ai voulu faire était tester chaque corps de module dans chaque rangée de module. Mon code modifié ressemble à ceci:

$("div.module-row").each(function(){ 
    maxHeight = 0; 
    $("div.module-body", this).each(function(){ 
    currentHeight = $(this).height(); 
    if (currentHeight > maxHeight) maxHeight = currentHeight; 
    }); 
    $("div.module-body", this).css("height", maxHeight); 
}); 

La seule différence est le premier sélecteur. Il était auparavant "div.module-box" et est maintenant "div.module-row".

Merci à tous ceux qui m'ont aidé à découvrir mon problème.

Answer 2

essayer, je comprends ce qui ne va pas ici, des excuses pour ne pas avoir immédiatement

$("div.module-body").each(function(){ 
    $("div.module-body", this).css("height", maxHeight); 
}); 

Après le premier chaque bloc. De cette façon, pour chaque boîte de div vous exécuterez deux boucles à chaque fois. On obtient la hauteur maximale et l'autre la définit.

Answer 3

Essayez avec ceci:

var maxHeight = 0, currentHeight=0; 
$("div.module-box").each(function(){ 
    currentHeight = $(this).height(); 
    if (currentHeight > maxHeight) maxHeight = currentHeight; 
}); 
$("div.module-body").css("height", maxHeight); 

Si vous voulez que, par rapport à leurs parents:

$("div.module-box").each(function(){ 
var maxHeight = 0, currentHeight=0; 
    $(this).children("div").each(function(){ 
    currentHeight = $(this).height(); 
    if (currentHeight > maxHeight) maxHeight = currentHeight; 
    }).css("height", maxHeight); 
}); 

Answer 4

J'ai ajouté l'index sur chaque boucle et vérifier lorsque le dernier élément est atteint pour régler la maxHeight:

/* Fixing Module Heights */ 

$("div.module-box").each(function(){ 

    maxHeight = 0; 

    moduleBodies = $("div.module-body", this); 

    moduleBodies.each(function(i){ 

    currentHeight = $(this).height(); 

    if (currentHeight > maxHeight) maxHeight = currentHeight; 
    if (i == moduleBodies.length -1) $("div.module-body", this).css("height", maxHeight); 
    }); 


}); 

Answer 5

Je ne sais pas si cela est le problème, mais vous devez utiliser var lors de la déclaration de vos variables.

/* Fixing Module Heights */ 
$("div.module-box").each(function(){ 
    var maxHeight = 0; 
    $("div.module-body", this).each(function(){ 
     var currentHeight = $(this).height(); 
     if (currentHeight > maxHeight) maxHeight = currentHeight; 
    }); 
    $("div.module-body", this).css("height", maxHeight); 
});