Notre document est composé d’une <div class="equilibre">, laquelle contient plusieurs sous-éléments qu’on veut équilibrer (c’est-à-dire à qui on va donner la hauteur de l’élément le plus haut).
On commence par indiquer ce qui doit se passer lorsque la page est prête :
<script type="text/javascript"><!--
$(document).ready(function() {
$(".equilibre").each(function(){
...
});
});
// --></script>Ici, tout élément portant la classe .equilibre va se voir appliquer une fonction. Cette fonction consiste à parcourir tous les sous-éléments de notre élement ($(">*", this)), pour d’abord leur appliquer à tous une fonction permettant de calculer le maximum :
function(){ h=Math.max(h,this.offsetHeight); }
On enchaîne ensuite avec l’application d’une propriété css sur tous ces éléments : .css({'height': h+'px'});
D’où le code complet :
<script type="text/javascript"><!--
$(document).ready(function() {
$(".equilibre").each(function(){
var h=0;
$(">*", this)
.each(function(){ h=Math.max(h,this.offsetHeight); })
.css({'height': h+'px'});
});
});
// --></script>Une bonne partie de l’intérêt des objets jQuery réside dans cette capacité à enchaîner des fonctions sur une série d’éléments.
RSS 2.0
Plan du site
Espace privé