Element mit der maximalen Höhe aus einer Reihe von Elementen

85

Ich habe eine Reihe von divElementen. In jQuerymöchte ich in der Lage sein, das divmit der maximalen Höhe und auch der Höhe davon herauszufinden div. Zum Beispiel:

<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>

Wenn wir uns das Obige ansehen, wissen wir, dass die 2. div(mit 4 Linien) die maximale Höhe von allen hat. Wie finde ich das heraus? Könnte jemand bitte helfen?

Bisher habe ich versucht:

$("div.panel").height()Dies gibt die Höhe des 1 zurück div.

jquery lshettyl
quelle

Antworten:

211

Verwenden Sie .map()und Math.max.

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

Wenn das Lesen verwirrend ist, ist dies möglicherweise klarer:

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

maxHeight = Math.max.apply(null, heights);
Matt Ball
quelle
1
Dies findet die höchste Höhe, aber keinen Verweis auf das tatsächliche Element.
Vincent Ramdhanie
Du hast recht; Mir war nicht klar, dass das OP das Element auch will. Ihre Antwort funktioniert in diesem Fall.
Matt Ball
3
@MattBall Warum die Funktion get, darf ich fragen? Was macht es und wozu dient es?
Chodorowicz
2
@chodorowicz froh, dass du gefragt hast. Sehen diese Antwort unter der zweiten Überschrift.
Matt Ball
1
@ MattBall Danke. JQuery .map gibt also ein Array-ähnliches Objekt zurück und get .get verwandelt es in ein Array. Es scheint jedoch, dass Math.max auf beiden Typen problemlos funktioniert (nur in der Chrome-Konsole getestet). In diesem Fall erscheint .get daher unnötig. Oder liege ich falsch?
Chodorowicz
20

Das HTML, das Sie gepostet haben, sollte einige verwenden, <br>um tatsächlich Divs mit unterschiedlichen Höhen zu haben. So was:

<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>

Abgesehen davon können Sie Folgendes tun, wenn Sie einen Verweis auf das Div mit der maximalen Höhe wünschen:

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
quelle
Seien Sie vorsichtig mit dieser Methode. Wenn Sie keine jQuery-Methode verwenden (wie .heightin diesem Fall), müssen Sie sie dereferenzieren, z. B.: $ (This) [0] .scrollHeight; `
Rogerdpack
5

Wenn Sie an mehreren Stellen wiederverwenden möchten:

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

Dann können Sie verwenden:

maxHeight($("some selector"));
Diogo Gomes
quelle
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>
Erweitern Sie das Snippet

maestro888
quelle
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>
Erweitern Sie das Snippet

maestro888
quelle
0

Wenn Sie daran interessiert waren, vollständig in Standard-JavaScript oder ohne forEach () zu sortieren:

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
quelle
0

Der einfachste und klarste Weg, den ich sagen würde, ist:

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

Dies könnte in gewisser Weise hilfreich sein. Korrigieren von Code aus @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
quelle