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 直接嵌套在列表中，因此您可能需要重新考虑如何设计它的样式，也许替换“带有列表项的阴影隐藏”div。

Answer 2

$('

') .appendTo('div#main nav.left ul li'); 这行将追加每个 li 内的 div。但是您显示的标记是错误的，div 应该放在每个 li 内。

现在你可以尝试下面的脚本来设置每个 li 内阴影隐藏 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());
});

演示。