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。 / p>

Answer 2

$('<div class="shadow-hide"></div>') .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());
});

Demo.

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

3 个答案: