在单独的 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");

Answer 2

按照@gurvinder372 的回答，您不妨使用单个查询：

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

因为你想为每个 ul li div 元素做这项工作。 需要注意的是，在 each/function 语句中：

• this 指向 HTML 元素（参见参考文档）
• $(this) 指向从 HTML 元素构造的 JQuery 元素（从而为您提供 JQuery 库的所有灵活性）

编辑 函数find 从调用它的选择开始执行一个新的选择。

对“ul li”元素从根开始进行选择，然后对每个元素进行子选择：

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

在ul li div 元素上执行从根开始的选择 => 这应该更有效，如果您不打算在ul li 级别上做任何工作，请使用它：

$("ul li div");

这相当于$("").find("ul li div");