在單獨的div中獲取子元素高度

Question

我想獲取每個div的子元素，然後根據各自的子元素高度設置每個div的高度。

我試圖找到一個類似的問題，但無法找到我想要的。我知道我需要一個.each功能，但我無法實現它的功能。

下面是我的代碼：

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); 
     }); 
    }); 

我想實現的是讓我們說的第一個div的子元素的總高度爲100像素，那麼它會將第一個div設置爲100px高度。如果第二個div的子元素的總高度是300px，那麼它會將第二個div設置爲300px高度。

Answer 1

繼@ gurvinder372回答，你不妨使用單個查詢：

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

，因爲您想爲每個ul li div元素完成這項工作。 需要注意的是，一個每/功能語句內是很重要的：

• this指向HTML元素（見參考文檔）
• $(this)點從HTML元素構成的JQuery的元件（從而使你所有的jQuery庫的靈活性）

編輯 功能find執行新選擇從調用它的選擇開始。

從「UL麗」元素的根進行選擇然後執行每個元件上的部分選定：

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

上ul li div元件進行選擇frmo根=>這應該是更有效的，用它如果你不打算做的ul li級別的任何作業：

$("ul li div"); 

這相當於$("").find("ul li div");

Answer 2

嘗試

$("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 
    }); 
}); 

另外，如果你只是想設置DIV爲子女身高的總和的高度，然後簡單地設置這些div的高度auto

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