Максимальная высота дочерних элементов средствами jQuery

В ходе разработки очередного сайта столкнулся с проблемой назначения блоку меню высоты самого высокого из потомков в блоке. Так как данная проблема встречается мне уже не в первый раз привожу ее решение.

Суть проблемы в том, что у нас есть <div class="inmenu">, обертка в которой находятся несколько маркированных списков, которые являются отдельными блоками меню для разных уровней. Пока данные маркированные списки имеют видимость, наша обертка принимает значение самого высокого из маркированных списков и проблем не возникает. Но иногда нам необходимо скрыть видимость последующих списков и показывать их только при совершении отдельных действий с предыдущим уровнем. И вот тут возникает проблема, так как наша обертка принимает высоту только видимых списков. Как же получить высоту самого высокого из потомков если он скрыт?

Чтобы получить высоту самого высокого элемента в блоке, вне зависимости обладает ли он видимостью или его видимость скрыта, воспользуемся следующим кодом:

<script type="text/javascript">
$(document).ready(function() {
	var bgh = 0;
	$('.inmenu ul').each(function(){
		if ($(this).height() > bgh ) {
			bgh = $(this).height();
		}
	});
	console.log(bgh);
	$('.inmenu').height(bgh);
});
</script>

Кстати нашел еще более короткий код для решения данной проблемы:

var bgh = 0;
$('.inmenu ul').each(function(){bgh = Math.max(bgh,$(this).outerHeight());});
console.log(bgh);

Обратите внимание, что для вывода информации мы используем конструкцию console.log(), которая направляет полученную информацию в консоль браузера. Для просмотра консоли необходимо открыть раздел консоль средства разработки в Chrome или Firefox.