jQuery - 在悬停孙子或曾孙时，递归控制父项的样式

Question

我试图建立一个最低4级菜单(无限)。我希望用jQuery在菜单上创建一个通用的递归操作。当我悬停一个子元素时，父元素的高度会增加，同样的结果，我也希望当悬停任何孙子或曾孙时，相同的父元素保持高度增加，而不是孙子或曾孙。

我试过了:http://jsfiddle.net/dTqX3/

看起来我需要别的东西而不是

$(this).parent().parent().parent().find("a:first")

不能正常工作

任何帮助将非常感激!

Answer 1

根据DOM结构，您需要爬上树到<ul>祖先(悬停项的容器)，并找到它的兄弟锚(导致该容器显示的高级菜单项)，转换为:

$(this).closest("ul").siblings("a")

Answer 2

从@Jon那里得到了一些很棒的指导(非常感谢!)我尝试过像。parentsuntil()和。parents()这样的函数。预期的结果仍然没有找到，但我有可能有一个想法是如何工作这个递归的父计数。我保留了.parents()的方式，加入了.last()。下一段代码完成了这个任务:

$(this).parents('ul > li').last().find("a:first").attr('style', 'height:55px;line-height:55px;');

这是重要的部分:

$(this).parents('ul > li').last().find("a:first")