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

85

J'ai un ensemble d' divéléments. En jQuery, j'aimerais pouvoir savoir divavec la hauteur maximale et aussi la hauteur de cela div. Par exemple:

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

En regardant ce qui précède, nous savons que le 2ème div(avec 4 lignes) a la hauteur maximale de tous. Comment puis-je le savoir? Quelqu'un pourrait-il s'il vous plaît aider?

Jusqu'à présent, j'ai essayé:

$("div.panel").height()qui renvoie la hauteur du 1er div.

jquery lshettyl
la source

Réponses:

213

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);
Matt Ball
la source
1
Cela trouve la hauteur la plus élevée mais pas une référence à l'élément réel.
Vincent Ramdhanie
Tu as raison; Je n'étais pas sûr que le PO souhaite également l'élément. Votre réponse fonctionne dans ce cas.
Matt Ball
3
@MattBall Pourquoi la fonction get, puis-je demander? Que fait-il et quel est son objectif?
chodorowicz
2
@chodorowicz heureux que vous ayez posé la question. Voir cette réponse , sous le deuxième titre.
Matt Ball
1
@MattBall Merci. Donc jQuery .map renvoie un objet de type tableau et get .get le transforme en tableau. Mais il semble que Math.max fonctionne facilement sur ces deux types (juste testé dans la console Chrome), donc dans ce cas .get semble inutile. Ou ai-je tort?
chodorowicz
20

Le html que vous avez publié devrait en utiliser <br>pour avoir des divs de différentes hauteurs. 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 au 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");
Vincent Ramdhanie
la source
Soyez prudent avec celui-ci, si vous n'utilisez pas une méthode jQuery à l'intérieur (comme .heightdans ce cas), vous devez la déréférencer, ex: `$ (this) [0] .scrollHeight;`
rogerdpack
5

Si vous souhaitez réutiliser à plusieurs endroits:

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

Ensuite, vous pouvez utiliser:

maxHeight($("some selector"));
Diogo Gomes
la source
1 

function startListHeight($tag) {
  
    function setHeight(s) {
        var max = 0;
        s.each(function() {
            var h = $(this).height();
            max = Math.max(max, h);
        }).height('').height(max);
    }
  
    $(window).on('ready load resize', setHeight($tag));
}

jQuery(function($) {
    $('#list-lines').each(function() {
        startListHeight($('li', this));
    });
});
#list-lines {
    margin: 0;
    padding: 0;
}

#list-lines li {
    float: left;
    display: table;
    width: 33.3334%;
    list-style-type: none;
}

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

#list-lines::after {
    content: "";
    display: block;
    clear: both;
    overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<ul id="list-lines">
    <li>
        <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_sddu7-2560x1600.jpg" alt="" />
        <br /> Line 1
        <br /> Line 2
    </li>
    <li>
        <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_mixwall66-2560x1600.jpg" alt="" />
        <br /> Line 1
        <br /> Line 2
        <br /> Line 3
        <br /> Line 4
    </li>
    <li>
        <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_sddu7-2560x1600.jpg" alt="" />
        <br /> Line 1
    </li>
    <li>
        <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_mixwall66-2560x1600.jpg" alt="" />
        <br /> Line 1
        <br /> Line 2
    </li>
</ul>
Développer l'extrait

maestro888
la source
1 

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul {
  display: flex;
  flex-wrap: wrap;
}

ul li {
  width: calc(100% / 3);
}

img {
  width: 100%;
  height: auto;
}
<ul>
  <li>
    <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_sddu7-2560x1600.jpg" alt="">
    <br> Line 1
    <br> Line 2
  </li>
  <li>
    <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_mixwall66-2560x1600.jpg" alt="">
    <br> Line 1
    <br> Line 2
    <br> Line 3
    <br> Line 4
  </li>
  <li>
    <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_sddu7-2560x1600.jpg" alt="">
    <br> Line 1
  </li>
  <li>
    <img src="http://img2.vetton.ru//upl/1000/346/138/vetton_ru_mixwall66-2560x1600.jpg" alt="">
    <br> Line 1
    <br> Line 2
  </li>
</ul>
Développer l'extrait

maestro888
la source
0

Si vous souhaitez trier entièrement en JavaScript standard, ou sans utiliser forEach ():

var panels = document.querySelectorAll("div.panel");

// You'll need to slice the node_list before using .map()
var heights = Array.prototype.slice.call(panels).map(function (panel) {
    // return an array to hold the item and its value
    return [panel, panel.offsetHeight];
}),

// Returns a sorted array
var sortedHeights = heights.sort(function(a, b) { return a[1] > b[1]});
Paul Kane
la source
0

Le moyen le plus simple et le plus clair que je dirais est:

var maxHeight = 0, maxHeightElement = null;
$('.panel').each(function(){
   if ($(this).height() > maxHeight) {
       maxHeight = $(this).height();
       maxHeightElement = $(this);
   }
});
Davefrassoni
la source
0

Cela pourrait être utile, d'une certaine manière. Correction du code de @diogo

$(window).on('load',function(){

// get the maxHeight using innerHeight() function
  var maxHeight = Math.max.apply(null, $("div.panel").map(function ()                                                        {
    return $(this).innerHeight();
  }).get());
  
// Set the height to all .panel elements
  $("div.panel").height( maxHeight );
  
});
Jessiemar Pedrosa
la source