jQuery fetch Exact Parent of Child（使用 UL 和 LI）答案

【问题标题】：jQuery fetch Exact Parent of Child (used UL and LI)jQuery fetch Exact Parent of Child（使用 UL 和 LI）
【发布时间】：2013-05-09 07:10:57
【问题描述】：

我遇到了一个场景，我有一个 n 级菜单，我必须生成一个旨在像这样工作的自动标题。

*Module1             *Module2
 -Sub Module 1.1        -Sub Module 2.1
 -Sub Module 1.2        -Sub Module 2.2
 -Sub Module 1.2            *Sub Module 2.2.1
                            *Sub Module 2.2.2

如果用户选择Sub Module 2.2.2，那么标题内容应该是Module2 >> Sub Module 2.1 >> Sub Module 2.2.1。同理，如果用户选择 Sub Module 1.1，那么 header 应该是 Module1 >> Sub Module1.1。

这个菜单基本上是使用普通的嵌套 UL 和 LI 实现的。请帮帮我。

谢谢。

【问题讨论】：

您能否发布您的 html，因为 UL 和 LI 嵌套将与答案相关。
“标题内容”应该显示在哪里？你的 HTML 是什么？

标签： javascript jquery html

【解决方案1】：

您可以为每个

使用 mouseover/click 事件绑定

。如果在选择菜单之前标题显示非常动态，请使用 mouseover 事件。使用 Click 事件，在用户选择菜单后显示标题然后取值列表并显示在标题中。

$('.menu-items').mouseover(function(){
    var thisName=$(this).text();
    var name=$(this).parent().parent().find('.menu-name').text();
   $('.header').text(name +" "+thisName);
});

在 JSFiddle 中输出 http://jsfiddle.net/saiprasad2k6/LQfqT/6/

【讨论】：

【解决方案2】：

获取点击的元素。
使用 jQuery.parentsUntil() 遍历父级。 http://api.jquery.com/parentsUntil/

3 .收集父母的属性，生成头串。

var pList = clickedElements.parentsUntil('.mainModule'); // identifier of topmost parent

var myStr = pList.map(function () {   return this.html();}).get().join(" >>> ");

【讨论】：