Jquery访问远程父母

Question

考虑以下下拉菜单的HTML结构:

<ul class="tabMenu">
    <li><a href="#">Games</a>
     <div id="sub">
        <ul>
          <li><a href="#">Main</a></li>                         
          <li><a href="#">3D</a></li>
       </ul>
     </div>
    </li>
    <li><a href="#">Videos</a>
         <div id="sub">
            <ul>
              <li><a href="#">Main</a></li>                         
              <li><a href="#">3D</a></li>
           </ul>
        </div>
    </li>
</ul>

在这个菜单下，我用Jquery写了一些字符串(Home是默认值)，告诉用户他在哪里:

<div class="Pointer"><a href="#">Home</a></div>

下面的Jquery用于检测哪个类别/子类别被触发:

$('.tabMenu li a').click(function() {
            //get current link
            var currentLink = $(this);
            //get link text
            var linkText = currentLink.text();
            //Remove all activeTab classes
            $('.activeTab').removeClass('activeTab');
            //Add selected class with activeTab
            currentLink.parent().addClass("activeTab");
                    //Change pointer value according to the click
            $('.Pointer a').html(linkText);
        });

Jquery函数应该返回一个字符串，看起来像视频->主，如果用户从'视频'下拉菜单中点击子类别'主'和游戏->主，如果用户从游戏中选择主。这个代码只给出Main，无论它是从'游戏'或'视频'点击，任何帮助将非常感激。

Answer 1

你可以使用jQuery closest获取匹配选择器的第一个祖先元素，从当前元素开始，通过DOM树向上发展。

演示工作

$('.tabMenu li a').click(function() {
            //get current link
            var currentLink = $(this);
            //get link text
            var linkText = currentLink.text();
            //Remove all activeTab classes
            $('.activeTab').removeClass('activeTab');
            //Add selected class with activeTab
            currentLink.parent().addClass("activeTab");
                    //Change pointer value according to the click
            linkText = currentLink.closest('div').closest("li").children("a").text() + " > " + linkText ;
            $('.Pointer a').html(linkText);
        });

Answer 2

试试这个:

// Will only affect subcategory links
$('.tabMenu li #sub a').click(function() {
  var parentCategory = $(this).parent().parents('li:first').children('a:first').html()
})
// Will only affect "Games" and "Videos" links
$('.tabMenu > li > a').click(function() {
  var category = $(this).html() 
})

当然，你可以在选择器".tabMenu li #sub a"中同时使用它们，但我认为这种方式更简洁。

Answer 3

首先，同一个id只能有一个实例。(id = "子")。把它改成一个类。

尝试停止事件冒泡，换句话说，确保每次单击只执行一次脚本。