Question

I have the following Javascript code that sets the height of a menu’s submenu columns (li tags) to same height:

$(function() 
{
    var mainMenuElement = $("#mainMenu > li > a"),
        tallestColumnHeight = 0,
        mainMenuElementColumns = $("#mainMenu > li > ul.sub-menu > li");

    mainMenuElement.hover(function () 
    {
            mainMenuElementColumns.each(function()
            {
                if ($(this).height() > tallestColumnHeight) 
                { 
                    tallestColumnHeight = $(this).height(); 
                }
            });     
            mainMenuElementColumns.height(tallestColumnHeight); 
    }); 
});

This works, however it sets the height of all (sibling) top menu item sub-menu columns to first found tallestColumnHeight also.

How do I target only the children of the current element that’s being hovered?

Thanks!

Answer 1

Use context to find and target the submenus within each main list, and not all of them:

$(function() {
    $("#mainMenu > li > a").hover(function () {
        var tallestColumnHeight = 0;
        $("ul.sub-menu > li", this).each(function () {
            if ($(this).height() > tallestColumnHeight) {
                tallestColumnHeight = $(this).height();
            }
        }).height(tallestColumnHeight);
    });
});