jQuery - 在悬停孙子或孙子孙女时，递归控制父母的风格

Question

我正在尝试构建最低4级菜单（无限制）。我的愿望是使用jQuery在菜单上创建一般的递归操作。当我将一个子元素悬停时，父母的身高会增加，同样的结果我也喜欢悬停任何一个大孩子或曾祖母，相同的父元素保持高度增加，而不是大孩子或大 - 大 - 孩子。

我试过这个：http://jsfiddle.net/dTqX3/

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

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

工作不正确。

非常感谢任何帮助！

Answer 1

根据您的DOM结构，您需要将树爬上<ul>祖先（正在悬停的项目的容器）并找到作为其兄弟的锚点（导致此问题的更高级菜单项）要显示的容器），转换为：

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

进行此更改it seems to work just fine。

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")

DEMO