javascript - 获取单独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 的子元素的总高度是 100px，那么它将把第一个 div 设置为 100px 高度。如果第二个div的子元素的总高度是300px，那么它将把第二个div设置为300px高度。

Answer 1

尝试

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