Find height of each certain element and set it to it's parent

Question

I'm trying to set height of an li element to its parent's parent div. Every li:first-child has different height based on it's content. What I have so far is:

HTML

<div class="somediv">
<ul>
<li class="someli">some content</li>
<li class="someli"></li>
<li class="someli"></li>
</ul>
</div>
<div class="somediv">
<ul>
<li class="someli">some other content</li>
<li class="someli"></li>
<li class="someli"></li>
</ul>
</div>

jQuery

jQuery.each(jQuery('.someli:first-child'), function() {
var height = jQuery(this).height();
alert(height);
jQuery(this).parent().parent().parent().find('.somediv' ).height(height);
});

Above function alerts height of each li:first-child properly but sets height only of the second li:first-child to all .somediv divs. How to force that function to apply height of each li:first-child only to the parent of that particular li?

Answer 1

with second iteration of the .each() method, you are finding the both .somediv elements and setting height of second li:first-child to all of them. you need to use .closest()

jQuery.each(jQuery('.someli:first-child'), function() {
var height = jQuery(this).height();
alert(height);
jQuery(this).closest('.somediv' ).height(height);
});

This selector jQuery(this).parent().parent().parent() finds parent of both .somedivelements, and using .find() you are selecting both of them