Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
[Gelöst] jQuery: Höhe der ersten drei Elemente berechnen
#1
Ich habe eine Liste von Elementen nach folgendem Muster:

    HTML Programming
  1. <div class="items">
  2.  
  3. <div class="list-item">
  4. <div class="list-item-image"><img src="images/news-dummythumb.jpg" width="72" height="45" alt="Dummy"></div>
  5. <div class="list-item-content">
  6. <div class="list-item-date">28.08.2012</div>
  7. <div class="list-item-text">A Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
  8. </div>
  9. </div>
  10.  
  11. <div class="list-item">
  12. <div class="list-item-image"><img src="images/news-dummythumb.jpg" width="72" height="45" alt="Dummy"></div>
  13. <div class="list-item-content">
  14. <div class="list-item-date">28.08.2012</div>
  15. <div class="list-item-text">A Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
  16. </div>
  17. </div>
  18.  
  19. <div class="list-item">
  20. <div class="list-item-image"><img src="images/news-dummythumb.jpg" width="72" height="45" alt="Dummy"></div>
  21. <div class="list-item-content">
  22. <div class="list-item-date">28.08.2012</div>
  23. <div class="list-item-text">A Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
  24. </div>
  25. </div>
  26.  
  27. <div class="list-item">
  28. <div class="list-item-image"><img src="images/news-dummythumb.jpg" width="72" height="45" alt="Dummy"></div>
  29. <div class="list-item-content">
  30. <div class="list-item-date">28.08.2012</div>
  31. <div class="list-item-text">A Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
  32. </div>
  33. </div>
  34.  
  35. <div class="list-item">
  36. <div class="list-item-image"><img src="images/news-dummythumb.jpg" width="72" height="45" alt="Dummy"></div>
  37. <div class="list-item-content">
  38. <div class="list-item-date">28.08.2012</div>
  39. <div class="list-item-text">A Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
  40. </div>
  41. </div>
  42.  
  43. </div>



Die Anzahl der Divs "list-item" variiert, auch die Menge des Textes und somit die Höhe der Contaner ist verschieden.

Gibt es per jQUery eine Möglichkeit, die Höhe der ersten drei list-items zu ermitteln und dann dem umgebenden Container "items" diesen Wert als height zu zuweisen?
Zitieren
#2
Hallo Wolfgang,

wenn ich dich richtig verstehe, dann könnte dieses kleine Plugin eine Lösung sein:
syncHeight

Normalerweise synchronisiert dieses Plugin alle übergebenen Elemente auf die selbe Höhe.
Mit $('p').syncHeight() würden demnach alle P-Elemente die Höhe des höchsten P-Elements erhalten. Das ist aber nicht genau das, was du benötigst.
Leicht angepasst würde das aber so funktionieren:

Code:
jQuery(window).load(function(){
  var setToHighestItem,
      $ = jQuery;

  setToHighestItem = function() {
    /* die ersten 3 Elemente auf die selbe Höhe bringen */
    $('.items .list-item:lt(3)').syncHeight();

    /* items auf die selbe Höhe bringen */
    $('.items').height($('.items .list-item:first').outerHeight());

    return true;
  }

  setToHighestItem();

});

Ohne Plugin sähe das in etwa so aus:
Code:
jQuery(window).load(function(){
  var setToHighestItem,
      $ = jQuery;

  setToHighestItem = function() {
    var highest = 0,
        i = 0,
        container = $('.items'),
        listItems = container.children('.list-item');

    for (i = 0; i < 3; i++) {
      var el = $(listItems[i]);
      highest = (el.outerHeight() > highest) ? el.outerHeight() : highest;
    }

    container.height(highest);
    
    return true;
  }

  setToHighestItem();

});​

Wichtig:
Wenn du mit Breiten und Höhen arbeitest, diese also mit JavaScript abfragen und bearbeiten möchtest, dann solltest du immer die jQuery(window).load Funktion verwenden, da nur diese wirklich sicher stellt, dass alle Inhalte geladen wurden.

Viele Grüße
Michael Schulze
Webentwickler & Designer

http://michsch.de
http://michs.ch/twitter
Zitieren
#3
Du müsstest die Variante ohne Plugin noch anpassen, das container nur die ersten 3 zugewiesen bekommt. So würdest du mE alle in der Höhe synchen.

Viele Grüße,
Cedric Ziel

Gesendet von meinem Galaxy Tab 10.1N
Zitieren
#4
Leute, ihr seid echte Cracks! Big Grin

Funktioniert perfekt, ich habe nur 2 kleine Anpassungen vorgenommen, da der äussere Container die Höhe von 3 .items haben soll.

So sieht es jetzt aus und funktioniert:

    JAVASCRIPT Programming
  1. jQuery(window).load(function(){
  2. var setToHighestItem,
  3. $ = jQuery;
  4.  
  5. setToHighestItem = function() {
  6. /* alle Elemente auf die selber Höhe bringen */
  7. $('.items .list-item').syncHeight();
  8.  
  9. /* .scrollable auf die Höhe von 3 .items bringen */
  10. /* +1 dient zum Ausgleich eines border-bottom */
  11. $('.scrollable').height($('.items .list-item:first').outerHeight()*3+1);
  12.  
  13. return true;
  14. }
  15.  
  16. setToHighestItem();
  17.  
  18. });

Zitieren
#5
Ah ok, dann war das eher ein Missverständnis. Ich dachte, dass der äußere Container die Höhe des höchsten der drei ersten 3 .items haben soll.
Ich hatte nicht herausgelesen, dass die addiert werden sollen. Dann geht es ja noch leichter:
Code:
jQuery(window).load(function(){
  "use strict";

  var setHeightTo3Items,
      $ = jQuery;

  setHeightTo3Items = function() {
    var height = 0,
        i = 0,
        container = $('.items'),
        listItems = container.children('.list-item');

    for (i = 0; i < 3; i++) {
      var el = $(listItems[i]);
      height += el.outerHeight();
    }

    /* border addieren */
    container.height(height + 1);

    return true;
  };

  setHeightTo3Items();

});
Michael Schulze
Webentwickler & Designer

http://michsch.de
http://michs.ch/twitter
Zitieren
#6
Ich nehme die Variante mit syncheight, dass sieht in diesem Fall von der Optik her besser aus. Nur lasse ich alle Elemente syncen, auch die, die am Anfang noch nicht sichtbar sind.
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste