Holen Sie Kinder Elementhöhe in separaten div

Question

Ich möchte die untergeordneten Elemente jedes div und dann die Höhe jedes div entsprechend ihrer jeweiligen gesamten untergeordneten Elemente Höhe.

Ich habe versucht, eine ähnliche Frage zu finden, kann aber nicht finden, was ich wollte. Ich weiß, dass ich eine Each-Funktion brauchte, aber ich kann sie nicht zum Laufen bringen.

Unten ist mein Code:

HTML

<ul> 
    <li> 
    <div class="container"> 
     <h1>content</h1> 
     <a href="#">content</a> 
    </div> 
    </li> 
    <li> 
    <div class="container"> 
     <h1>very long contents</h1> 
     <p>content</p> 
     <a href="#">content</a> 
    </div> 
    </li> 
    <li> 
    <div class="container"> 
     <h1>super uber ultra long contents</h1> 
     <p>content</p> 
     <a href="#">content</a> 
    </div> 
    </li> 
</ul> 

jQuery

$("ul li").each(function() { 
     $("ul li div").each(function(){ 
      var div_ht = 0; 
      $("ul li div").children().each(function() { 
       div_ht += $(this).outerHeight(true); 
      }); 
      $("ul li div").height(div_ht); 
     }); 
    }); 

Was ich ist das erste div Gesamthöhe des Kindes Element 100px ist sagen erreichen wollen ist lassen, dann wird es setze das 1. div auf 100px hoch. Wenn die Gesamthöhe des untergeordneten Elements des untergeordneten Elements 300 Pixel beträgt, wird das zweite Element auf 300 Pixel festgelegt.

Answer 1

Nach @ gurvinder372 Antwort, Sie könnten auch eine einzige Abfrage verwenden:

$("ul li div").each(function() { 
    var divHeight = 0; 
    $(this).children().each(function() { 
    divHeight += $(this).height(); 
    }); 
    $(this).height(divHeight); 
}) 

wie Sie die Aufgabe für jede Elemente erledigen möchten. Es ist wichtig, dass innerhalb eines jeder/Funktionsanweisung zu beachten:

• this Punkte auf das HTML-Element
• $(this) zeigt auf das JQuery-Element aus dem HTML-Elemente (so konstruiert (die Referenzdokumentation) geben Sie alle die Flexibilität der JQuery-Bibliothek)

bearbeiten die Funktion find führt eine neue Auswahl ausgehend von der Auswahl, aus der es aufgerufen wird.

Führen Sie eine Auswahl von der Wurzel auf „ul li“ Elemente dann auf jedem Element ein subselection tun:

$("ul li").find("div"); 

Führen Sie eine Auswahl frmo der Wurzel auf ul li div Elemente => Dies sollte effizienter sein, es verwenden wenn Sie keine Arbeit zu tun auf der ul li Ebene planen:

$("ul li div"); 

Dies entspricht $("").find("ul li div");

Answer 2

versuchen

$("ul li").each(function() { 
    $(this).find("div").each(function(){ //this line changed, iterating individual li's div rather than whole bunch 
     var div_ht = 0; 
     $(this).children().each(function() { //observe change in this line too 
      div_ht += $(this).outerHeight(true); 
     }); 
     $(this).height(div_ht); //observe change in this line too 
    }); 
}); 

Auch, wenn Sie einfach die Höhe des div als die Summe auf ihre Kinder Höhe einstellen wollen, dann setzen Sie einfach die Höhe derjenigen div zu auto

$("ul li div").css("height", "auto");