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

Question

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

我有

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

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

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

Answer 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());
}):;

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

演示。