javascript - jQuery fetch Exact Parent of Child（使用 UL 和 LI）

Question

我遇到了一个场景，我有一个 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，那么标题应该是Module1 >> Sub Module1.1。

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

谢谢。

Answer 1

您可以为每个

. 如果在选择菜单之前标题显示非常动态，请使用 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/

Answer 2

1. 获取点击的元素。

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