jQuery根据另一个元素的高度动态改变元素的高度

Posted 2023-03-14

【中文标题】jQuery根据另一个元素的高度动态改变元素的高度

【英文标题】：jQuery dynamically change height of element according to the height of another

【发布时间】：2011-08-19 00:17:03

【问题描述】：

我知道这个问题已经得到解答，但我仍然需要针对我的具体情况的帮助

我有

<ul>
<li>blah blah</li>
<li>blah blah blah</li>
</ul>

我已经设法在每个 li 使用后插入一个 div

$('<div class="shadow-hide"></div>') .appendTo('div#main nav.left ul li');

所以现在的html是

<ul>
  <li>blah blah</li>
  <div class='shadow-hide'></div>
  <li>blah blah blah</li>
  <div class='shadow-hide'></div>
</ul>

但是如何设置 div 的高度以匹配它之前的 li 的高度？

到目前为止，这是我的尝试，但我猜它只是获得了第一个 li 的高度：

$('<div class="shadow-hide"></div>') .appendTo('div#main nav.left ul li');
    var liHeight = $("div#main nav.left ul li").height();
    $('div.shadow-hide').css('height', liHeight);

【问题讨论】：

附带说明，您不能将 div 元素嵌套在 ul 内。

哈+1，我只是为它写了一些脚本，甚至没有注意到他已经这样做了。

@numbers - 你也得到了 +1 :)

好吧，示例标记在 li 之外有 div，但代码（包括原始的非工作示例）将其附加在里面，所以我想这一切都很好：-P跨度>

谢谢大家，非常感谢，当然你们都值得加分:)

【参考方案1】：

也许：

$('.shadow-hide').height(function() 
   return $(this).prev('li').height();
);

或者更符合您的实际用例：

$('#main nav.left ul li').each(function(i, el) 
  var $el = $(el), height = $el.height();
  $('<div class="shadow-hide" />').height(height).appendTo($el);
);

编辑：如 cmets 中所述，您不能将 div 直接嵌套在列表中，因此您可能需要重新考虑如何设置它的样式，也许用列表项替换“shadow-hide” div。

【讨论】：

谢谢，是的，第二段代码有效:) 我只需要更改它以使其包含边距，我想我可以处理。它比我想象的要复杂得多！我还有很多东西要学，非常感谢

总是有outerHeight 而不是简单的height

【参考方案2】：

$('<div class="shadow-hide"></div>') .appendTo('div#main nav.left ul li'); 这一行将在每个 li 中附加 div。但是您显示的标记是错误的，div 应该放在每个 li 内。

现在您可以尝试下面的脚本来设置每个 li 内的 shadow-hide div 的高度。

$("div#main nav.left ul li").each(function()
   $(this).find(".shadow-hide").height($(this).height());
):;

【讨论】：

是的，很好，我会尽量将 div 保留在 li 中，谢谢

【参考方案3】：

两者都可以使用.append(function(index, html) 简洁高效地完成，我认为在这种情况下更有意义：

var div = '<div class="shadow-hide">Test</div>';

$("ul li").append(function(index, html) 
    return html + ($(div).height($(this).height()).html());
);

Demo.