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

Select Custom Attribute from nested LI

本文关键字：选择 自定义属性 LI 嵌套      更新时间：2023-09-26

我有一个如下所示的菜单项，现在在这种情况下，我有一个groupId=5的父项，即分析。现在我要做的是，当我单击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

您可以对[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>

我想你应该使用它： 

$("ul[sub-groupid] li").click(function (e) {
    var lid = $(this).has('ul') 
              ? $(this).find('li').attr('link-id') 
              : $(this).attr('link-id');
    NavigationMenu.App.SetLinkId(lid);
});


$("ul[sub-groupid] li").click(function (e) {
        e.stopPropagation();
        alert($(this).attr('link-id'))
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

相关文章：