jQuery динамически изменяет высоту элемента в соответствии с высотой другого

Question

Я знаю, что на этот вопрос ответили, но мне все еще нужна помощь в моей конкретной ситуации

У меня есть

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

Мне удалось вставить div после каждого li, используя

$('<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 "shadow-hide" элементами списка. 1007 *

Answer 2

И то, и другое можно сделать кратко и эффективно, используя .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());
});

Демонстрация.

Answer 3

$('<div class="shadow-hide"></div>') .appendTo('div#main nav.left ul li'); эта строка будет добавлять div внутри каждого из li. Но разметка, которую вы показали, неверна, div должен идти внутри каждого li.

Теперь вы можете попробовать приведенный ниже скрипт, чтобы установить высоту скрытых теней внутри каждого li.

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