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

演示