How to best show all cascaded sub-menus

[anon56670668]

My goal is to show all cascaded sub-menus with the following:

For what it’s worth, I am not 100% certain whether the problem rests within the mark-up or the javascript. All I know is that the 3 cascaded sub-menus do not show immediately. They do eventually, but not immediately.

For example, I am wrestling with the fact that my chained call in showChainOfSubMenusForThisItem does not check for in-between returned null objects, like with .find("li.daddy")

$thisSubMenu = $lastSubMenu
					.find("li.daddy")
					.first()
					.find(".aMenu")
					.first();

MARK-UP:

<li class="daddy">
	text2
	<!--
		sub-menu = .daddy .aMenu
		sub-menu item = .daddy .aMenu li
	-->
	<ul class="aMenu">   <!-- sub-menu  -->
		<li class="daddy">
			text21
			<ul class="aMenu">   <!-- sub-sub-menu  -->
				<li class="daddy">
					text211
					<ul class="aMenu">   <!-- sub-sub-sub-menu  -->
						<li>text2111</li>
						<li>text2112</li>
					</ul>
				</li>   <!-- daddy text211 -->
			</ul>
		</li>   <!-- daddy text21 -->
	</ul>
</li>   <!-- daddy text2 -->

JAVASCRIPT

if ($currItem.hasClass("daddy")) {
				
	// returns the last sub-menu in the chain:
	$itsCurrSubMenu = showChainOfSubMenusForThisItem($currItem);
	$itsPrevSubMenu = $itsCurrSubMenu;
	
	$lastLI = $itsCurrSubMenu.find("li").last();
	$lastLI.focus();

}

function showChainOfSubMenusForThisItem($theItem) {

	var $thisSubMenu, $lastSubMenu = {};
	
	// we already know there's at least 1 sub-menu
	// because the passed $theItem = hasClass(".daddy")
	$thisSubMenu = $theItem.find(".aMenu").first();
	
	while ($lastSubMenu[0] !== $thisSubMenu[0])
	{
		$lastSubMenu = $thisSubMenu;
		showMenu($lastSubMenu);

		// continue looking for more sub-menus ...
		$thisSubMenu = $lastSubMenu
							.find("li.daddy")
							.first()
							.find(".aMenu")
							.first();
	}
	
	return $lastSubMenu;   // the very last in the chain
	
}   // showChainOfSubMenusForThisItem

[m_hutley]

$theItem.find(".aMenu").first();

So we’re going DOWN the tree, and this is a jquery find. in this case, $theItem would be something above all of this markup.

$theItem.find(".aMenu").each((x) => showMenu(x));