jQuery dynamically change height of element according to the height of another

Question

I know this question has been answered but I still need help for my specific situation

I have

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

I have managed to insert a div after each li using

$('<div class="shadow-hide"></div>') .appendTo('div#main nav.left ul li');

So the html is now

<ul>
  <li>blah blah</li>
  <div class='shadow-hide'></div>
  <li>blah blah blah</li>
  <div class='shadow-hide'></div>
</ul>

but how do I set the height of the div to match the height of the li before it?

here's my attempt so far but I guess it just gets the height of the first 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);

On a side note, you cannot nest `div` elements right inside `ul`. — Daniel O'Hara, Aug 19 '11 at 00:25
Hah +1, I just wrote some script for it without even noticing that he'd done that. — numbers1311407, Aug 19 '11 at 00:26
Well the thing is, the example markup has the div outside the li, but the code (including the original non-working example) appends it inside, so I guess It's all good :-P — numbers1311407, Aug 19 '11 at 00:35
thanks everyone, much appreciated, you all deserve points of course :) — morktron, Aug 19 '11 at 00:38

numbers1311407 · Accepted Answer · 2011-08-19T00:28:49.547

2

perhaps:

$('.shadow-hide').height(function() {
   return $(this).prev('li').height();
});

or perhaps more in line with your actual use case:

$('#main nav.left ul li').each(function(i, el) {
  var $el = $(el), height = $el.height();
  $('<div class="shadow-hide" />').height(height).appendTo($el);
});

Edit: as noted in the comments, you can't nest a div directly in a list, so you might want to rethink however you're styling this, perhaps replacing the "shadow-hide" divs with list items.

edited Aug 19 '11 at 00:28

answered Aug 19 '11 at 00:21

numbers1311407

33,686
9
90
92

thanks yes, the second bit of code works :) I just have to change it so that it includes the margin, I think I can handle that. It is much more complex than I thought! I have a lot to learn, many thanks – morktron Aug 19 '11 at 00:28
1

there's always `outerHeight` as opposed to simply `height` – numbers1311407 Aug 19 '11 at 00:29

score 1 · Answer 2 · answered Aug 19 '11 at 00:23

1

$('<div class="shadow-hide"></div>') .appendTo('div#main nav.left ul li'); this line is going to append the div inside each of the li's. But the markup which you have shown is wrong, div should go inside each li.

Now you can try the below script to set the height of shadow-hide divs within each li.

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

answered Aug 19 '11 at 00:23

ShankarSangoli

69,612
13
93
124

yes good point I will try to keep the div inside the li's thanks – morktron Aug 19 '11 at 00:33

score 1 · Answer 3 · answered Aug 19 '11 at 00:39

Both can be done concisely and efficiently using .append(function(index, html), which I think makes more sense in this scenario:

var div = '<div class="shadow-hide">Test</div>';

$("ul li").append(function(index, html) {
    return html + ($(div).height($(this).height()).html());
});

Demo.

jQuery dynamically change height of element according to the height of another

3 Answers3