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元素完成工作。值得注意的是，在每个/ function语句中：

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

修改函数find从调用它的选择开始执行新的选择。

从根目录中执行选择＆＃34; ul li＆＃34;然后，元素对每个元素进行子选择：

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

从ul li div elements =＆gt;上的根目录执行选择这应该更有效率，如果您不打算在ul li级别上做任何工作，请使用它：

$("ul li div");

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

在单独的div中获取子元素高度

2 个答案: