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 перед ним?

вот моя попытка, но я думаю, что она получает высоту первой ли:

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

Answer 2

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

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.