Выберите пользовательский атрибут из вложенного 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> 

ВЫБРАТЬ LINK

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

Таким образом, в двух словах, я хочу, чтобы иметь возможность выбрать link-id но если link-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>

Answer 2

Я полагаю, вы должны использовать:

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

Answer 3

$("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>