hauteurs d'éléments assortis jQuery/HTML

je la construction suivante dans mon document HTML:hauteurs d'éléments assortis jQuery/HTML

<div class="content"> 
<section class="column"></section> 
<aside class="column"></aside> 
</div>

Et je veux faire correspondre les hauteurs de la section et de côté à la hauteur du plus grand des deux. Je le script suivant, mais il ne fonctionne pas, des idées:

function unifyHeights() 
    {  
     var maxHeight = 0;  
     $('div.content').children('.column').each(function(){  
     var height = $(this).outerHeight();  
     if (height > maxHeight) { maxHeight = height; }  
    });  
    $('.column').css('height', maxHeight); 
    }

Source

2010-11-11 Stuart Frisby

Avez-vous tester si cette fonction anonyme est appelée deux fois, avec les enfants ciblés? Avez-vous regardé les valeurs 'hauteur' assignées? Est-ce que 'maxHeight' augmente? –

On dirait que rien n'était avec e fonction e dans votre question, parce que les deux colonnes obtiennent la même hauteur lorsque vous utilisez ce balisage et le code (extrait de votre exemple Pastebin):

<!doctype HTML> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
<script> 
function unifyHeights() 
{  
    var maxHeight = 0;  
    $('div.content').children('.column').each(function(){  
     var height = $(this).outerHeight();  
     if (height > maxHeight) { maxHeight = height; }  
    });  
    $('.column').css('height', maxHeight); 
} 
</script> 
<style> 
.content { 
background-color: yellow; 
} 
section.column { 
    width: 300px; 
    float: left; 
} 
aside.column { 
    width: 300px; 
    floaT: left; 
    display: inline; 
} 
</style> 
</head> 
<body> 
<div class="content"> 
    <section style="background-color: pink;" class="column">jldkjfls<br/><br/></section> 
    <aside style="background-color: green;" class="column">jldkjfls<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></section> 
<script> 
    unifyHeights(); 
</script> 
</body> 
</html>

Source

2010-11-11 23:21:55

Awesome. Merci beaucoup –

Essayez d'utiliser $('.column').css('height', maxHeight + 'px');

BTW, vous pouvez remplacer $('div.content').children('.column') avec $('div.content > .column')

Source

2010-11-11 22:48:15 ThiefMaster

Une belle façon d'obtenir le maximum d'un ensemble des propriétés utilise .map():

$(document).ready(function() {  
    var heights = $('div.content').children('.column').map(function(idx, el) { 
     return $(this).outerHeight(); 
    }).get(); 

    $('.column').height(Math.max(heights)); 
});

Source

2010-11-11 22:52:27 lonesomeday

Je dois faire quelque chose de fondamentalement faux puisque cela ne marche pas non plus - pouvez-vous voir dans ce document de test ce que cela pourrait être: http://pastebin.com/JqfThuQ8 –

@Stuart: Vous n'appelez pas du tout cette fonction , et d'ailleurs, d'après ma console et http://api.jquery.com, 'max' n'est pas une fonction. –

@Marcel Non, ce n'est pas le cas - je pensais que c'était une méthode de tableau JS native. Modification maintenant ... – lonesomeday

hauteurs d'éléments assortis jQuery/HTML

Répondre

Questions connexes