élément avec la hauteur maximale d'un ensemble d'éléments

Question

J'ai un ensemble d'éléments DIV. Dans jQuery je serais capable de trouver la div avec la hauteur maximale et la hauteur de cette DIV. Par exemple:

 <div>
    <div class="panel">
      Line 1
      Line 2
    </div>
    <div class="panel">
      Line 1
      Line 2
      Line 3
      Line 4
    </div>
    <div class="panel">
      Line 1
    </div>
    <div class="panel">
      Line 1
      Line 2
    </div>
&lt/div>
 

En regardant ce qui précède, nous savons que la 2e division (avec 4 lignes) a la hauteur maximale de toutes. Comment puis-je trouver cela dans Jquery? Quelqu'un pourrait-il s'il vous plaît aider?

Jusqu'ici j'ai essayé:

$("div.panel").height() qui me donne la hauteur de la 1ère div.

Answer 1

Utilisez .map() et Math.max .

 var maxHeight = Math.max.apply(null, $("div.panel").map(function ()
{
    return $(this).height();
}).get());
 

---

Si c'est déroutant à lire, cela pourrait être plus clair:

 var heights = $("div.panel").map(function ()
    {
        return $(this).height();
    }).get(),

    maxHeight = Math.max.apply(null, heights);
 

Answer 2

Le code HTML que vous avez publié devrait utiliser certains <br> pour avoir des divs avec des hauteurs différentes. Comme ça:

 <div>
    <div class="panel">
      Line 1<br>
      Line 2
    </div>
    <div class="panel">
      Line 1<br>
      Line 2<br>
      Line 3<br>
      Line 4
    </div>
    <div class="panel">
      Line 1
    </div>
    <div class="panel">
      Line 1<br>
      Line 2
    </div>
</div>
 

En dehors de cela, si vous voulez une référence à la div avec la hauteur maximale, vous pouvez le faire:

 var highest = null;
var hi = 0;
$(".panel").each(function(){
  var h = $(this).height();
  if(h > hi){
     hi = h;
     highest = $(this);  
  }    
});
//highest now contains the div with the highest so lets highlight it
highest.css("background-color", "red");
 

Answer 3

liste dynamique et sensible et pas de problème de hauteur

HTML

 <ul class="list-lines">
    <li>
        <img src="images/myimage.jpg" alt="" /><br />
        Line 1<br />
        Line 2
    </li>
    <li>
        <img src="images/myimage.jpg" alt="" /><br />
        Line 1<br />
        Line 2<br />
        Line 3<br />
        Line 4
    </li>
    <li>
        <img src="images/myimage.jpg" alt="" /><br />
        Line 1
    </li>
    <li>
        <img src="images/myimage.jpg" alt="" /><br />
        Line 1<br />
        Line 2
    </li>
</ul>
 

CSS

 .list-lines li {
    float: left;
    width: 33%;
}

.list-lines li img {
    width: 100%;
    height: auto;
}

.list-lines::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
}
 

jQuery

 $('.list-lines').each(function() {
    var $this = $(this);
    function setHeight() {
        var max = 0;
        $('li', $this).each(function() {
            $(this).height('auto');
            var h = $(this).height();
            max = Math.max(max, h);
        }).height(max);
    }

    $('li img', this).load(setHeight); //if list have image
    $(window).on('load resize', setHeight);
});
 

Answer 4

Essayez de connaître la hauteur et la hauteur de la division (similaires à celle affichée par Matt mais utilisant une boucle)