Comment obtenir la hauteur de la plus haute des enfants de l'élément en javascript/jQuery?

J'ai besoin d'une fonction pour obtenir la hauteur de la plus haute de l'élément à l'intérieur d'un div.

J'ai un élément avec beaucoup d'autres à l'intérieur (généré dynamiquement), et quand j'ai demander pour la hauteur de l'élément conteneur à l'aide de $(elem).hauteur(), j'obtiens une hauteur plus petite que celle de certains contenus à l'intérieur.
Certains des éléments à l'intérieur sont des images qui sont plus grandes que la taille de cet élément dit avoir.

J'ai besoin de savoir le plus haut de l'élément pour que je puisse faire c'est de hauteur.

InformationsquelleAutor Leandro Ardissone | 2009-07-02
  1. 31

    Vous pouvez toujours le faire:

    var t=0; //the height of the highest element (after the function runs)
var t_elem;  //the highest element (after the function runs)
$("*",elem).each(function () {
    $this = $(this);
    if ( $this.outerHeight() > t ) {
        t_elem=this;
        t=$this.outerHeight();
    }
});

    Édité pour le faire fonctionner à nouveau.

    • Vous souhaiterez peut-être utiliser outerHeight() à la place de hauteur().
    • Génial, merci les gars!
    • elem n'est pas défini t_elem.outerHeight() n'est pas une fonction Avez-vous tester cette?
    • Ryder: elem n'est pas définie, car c'est l'élément que vous souhaitez tester. Au lieu de elem, que vous mettez dans le nom du var qui contient l'élément que vous souhaitez tester. Comme pour outerHeight() plus probable que quelque chose a changé depuis que j'ai répondu à cette question. Je vais modifier la réponse pour le faire fonctionner.
    • merci man, était à la recherche pour cela aussi. Vieux mais l'or de réponse. Comme suggestion, vous pouvez ajouter un commentaire après les t=$this.outerHeight(); de manière débutants pouvait comprendre que t est la valeur finale et il peut utiliser à tout ce qu'elle veut avec la valeur (comme something.height(t+'px') ou something.animate( etc );
    • Je ne comprends toujours pas l'elem chose, j'ai essayé > $("*","#titre").each(function () { mais cela ne fonctionne pas, un exemple plus concret serait sympa
    • Votre problème est que vous utilisez une chaîne de caractères de l'élément. L'élément doit être l'élément DOM lui-même. Dans votre cas, il serait plus facile de faire de $("*", document.getElementById("headline")).

    InformationsquelleAutor Thomas
  2. 38

    J'ai trouvé cet extrait qui me semble plus simple et plus court, http://css-tricks.com/snippets/jquery/equalize-heights-of-divs 

    var maxHeight = 0;

$(yourelemselector).each(function(){
   var thisH = $(this).height();
   if (thisH > maxHeight) { maxHeight = thisH; }
});

$(yourelemselector).height(maxHeight);
    • ce doit être la accepté de répondre à
    InformationsquelleAutor gebeer
  3. 6

    Si l'élément div est plus petit que ce sont les enfants, les enfants sont probablement flottant. Pouvez-vous permettre à la div pour être aussi grand que les enfants?

    Si vous le pouvez, ajouter un élément de compensation à la bas pour faire de la div envelopper les enfants:

    <div id="someParent">
    <p>test</p>
    <img src="test1.png" alt="test1" style="float: left" />
    <img src="test2.png" alt="test2" style="float: left" />
    <div style="clear: both;"></div>
</div>

    Ou appliquer un clearfix CSS solution pour faire à peu près la même chose, mais sans augmentation de la majoration ou une compensation div.

    La div contenant obtiendrez alors la même hauteur que le plus haut de l'élément enfant, et vous pouvez l'obtenir par:

    $("#someParent").height();
    • que faire si il y aura 3 éléments avec width: 50% " par exemple, un parent de la hauteur sera la première et la troisième élément de la hauteur de la somme. Si votre réponse est incorrecte
    • Comment $("#someParent").height() donner la somme de la hauteur de deux ou trois enfants? Il serait toujours donner la hauteur de l'enfant avec la plus grande hauteur dans cet exemple, en raison de la compensation de l'élément. Quelle serait la largeur de la les enfants ont à faire avec elle? Essayez-la dans un navigateur. Cette réponse a été donnée il y a 6 ans, a passé beaucoup de choses depuis. flexbox est un moyen beaucoup plus facile si vous pouvez les déposer, pour <IE9.
    • mec pense qu'il une fois de plus de 3 éléments de 50% de la hauteur parent est la somme de la première et de la troisième éléments(si flotter à gauche), et bien c'est assez simple..
    InformationsquelleAutor oldwizard
  4. 4

    Dans mon cas, j'ai eu à l'utiliser avec un responsive design, donc je l'ai fait travailler avec la fenêtre de redimensionnement.

    function fixHeight(elem){
    var maxHeight = 0;
    $(elem).css('height','auto');
    $(elem).each(function(){
       if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
    });
    $(elem).height(maxHeight);
}

$(window).resize(function () {
    fixHeight('.myelement');
});
$(document).ready(function(e) {
    fixHeight('.myelement');
});

    J'espère que cela va aider quelqu'un !

    Amusez-vous les gars ! 🙂

    InformationsquelleAutor Cstyves