jquery - 仅为当前元素的子项设置悬停时所有列的相等高度

Question

我有以下Javascript代码，用于将菜单子菜单列（li标签）的高度设置为相同的高度：

$(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); 
    }); 
});

这样可行，但是它将所有（兄弟）顶级菜单项子菜单列的高度设置为第一个找到的tallestColumnHeight。

如何仅定位正在悬停的当前元素的子元素？

谢谢！

Answer 1

使用上下文查找和定位每个主列表中的子菜单，而不是所有主菜单：

$(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);
    });
});