javascript - 从嵌套 LI 中选择自定义属性

Question

我有一个如下所示的菜单项，现在在本例中，我有一个带有 groupId=5 的父项，即 Analytics。现在我想做的是，当我点击 LI 时，我想选择 link-id ...现在我可以轻松工作了。

问题来了，我如何选择 link-id="22" 和 link-id="23"不触发 link-id=21 因为在这种情况下 link-id=21 是另一个子菜单。

HTML

<li groupid="5">
                <a href="#">
                    <i class="fa fa-line-chart"></i>
                    <span class="nav-label">Analytics</span>
                    <span class="fa arrow"></span>
                </a>
                <ul sub-groupid="5" class="nav nav-second-level">
                    <li link-id="13"><a href="#">Overview</a></li>
                    <li link-id="19"><a href="#">Social Report Card</a></li>
                    <li link-id="20">@Html.ActionLink("Reputation Report Card", "ReputationReportCard", "Reports", new { area = "Analytics" }, null)</li>
                    <li link-id="21">
                        <a href="#">
                            <span class="nav-label">Facebook Snapshot</span>
                            <span class="fa arrow"></span>
                        </a>
                        <ul class="nav nav-third-level">
                            <li link-id="22">@Html.ActionLink("Overview", "Index", "Overview", new { area = "Analytics" }, null)</li>
                            <li link-id="23">@Html.ActionLink("Content", "Index", "Content", new { area = "Analytics" }, null)</li>
                        </ul>
                    </li>
                </ul>
            </li>

选择链接

   $("ul[sub-groupid] > li").click(function (e) {
        NavigationMenu.App.SetLinkId($(this).attr('link-id'));
    });  

所以简而言之，我希望能够选择 link-id 但如果 link-id 有子菜单，我想选择子菜单的链接-id

Answer 1

您可以对 [sub-groupid] 元素使用点击处理程序，然后找到距离被点击元素最近的 li，然后获取其 link- id

$("ul[sub-groupid]").click(function(e) {
  alert($(e.target).closest('li[link-id]').attr('link-id'));
  NavigationMenu.App.SetLinkId($(e.target).closest('li[link-id]').attr('link-id'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li groupid="5">
    <a href="#">
      <i class="fa fa-line-chart"></i>
      <span class="nav-label">Analytics</span>
      <span class="fa arrow"></span>
    </a>
    <ul sub-groupid="5" class="nav nav-second-level">
      <li link-id="13"><a href="#">Overview</a></li>
      <li link-id="19"><a href="#">Social Report Card</a></li>
      <li link-id="20">@Html.ActionLink("Reputation Report Card", "ReputationReportCard", "Reports", new { area = "Analytics" }, null)</li>
      <li link-id="21">
        <a href="#">
          <span class="nav-label">Facebook Snapshot</span>
          <span class="fa arrow"></span>
        </a>
        <ul class="nav nav-third-level">
          <li link-id="22">@Html.ActionLink("Overview", "Index", "Overview", new { area = "Analytics" }, null)</li>
          <li link-id="23">@Html.ActionLink("Content", "Index", "Content", new { area = "Analytics" }, null)</li>
        </ul>
      </li>
    </ul>
  </li>  
</ul>