獲取列表項ID，但使用Jquery使例外

Question

我有一個問題。我想從某個列表中獲取該ID。這裏的列表：

$("#ul_navigation li").click(function() { 
     alert(this.id); // get id of clicked li 
    }); 

它可以完美的，但問題是，當我點擊子表ID，標題列表ID是顯示出來：

<ul id="ul_navigation"> 
     <li><a href="<?php echo full_url(); ?>">Home</a></li> 
     <li id="1"><a href="#">Office Routine</a> 
      <ul> 
       <li id="4"><a href="#">Meeting Points</a></li> 
       <li id="5"><a href="#">Statistic 101</a></li> 
       <li id="6"><a href="#">Email 101</a></li> 
       <li id="7"><a href="#">General</a></li> 
       <li id="8"><a href="#">Schedule</a></li> 
       <li id="9"><a href="#">Smart Tips</a></li> 
      </ul> 
     </li> 
     <li id="2"><a href="#">Procedures</a> 
      <ul> 
       <li id="10"><a href="#">Operation</a></li> 
       <li id="11"><a href="#">Export Commercial</a></li> 
       <li id="12"><a href="#">Customer Service</a></li> 
       <li id="13"><a href="#">Export Document</a></li> 
       <li id="14"><a href="#">Logistic</a></li> 
       <li id="15"><a href="#">Finance</a></li> 
       <li id="16"><a href="#">Import Document</a></li> 
       <li id="17"><a href="#">Information Technology</a></li> 
       <li id="18"><a href="#">Human Resource Management</a></li> 
      </ul> 

我可以使用下面的jQuery語法獲得ID太。例如，我點擊ID爲4的會議點，然後辦公室例程ID也顯示出來。

如何創建一些排除所以只有子列表id顯示？

謝謝。

Answer 1

您需要防止處理事件傳播。

$("#ul_navigation li").click(function(e) { 
    alert(this.id); // get id of clicked li 
    e.stopPropagation() 
}); 

演示：Fiddle

Answer 2

使用直接孩子選擇：

$("#ul_navigation > li").click(function() { 
     alert(this.id); // get id of clicked li 
    }); 

這裏是demo 這裏是documentation

Answer 3

Arun P johny's答案是好的，但我想補充的東西。

我建議你綁定a而不是li的點擊事件。這樣，它將解決您的問題，如果需要，您可以使用.preventDefault()。

例如，如果Office Routine有一個子菜單，點擊之後，你打開它（不加載其他頁面），代碼看起來像：

$('li ul').hide() 
$("#ul_navigation li a").click(function(e) { 
    var $this = $(this); 
    alert($this.parent().attr('id')); // get id of clicked li 
    if($this.closest('ul').is('#ul_navigation') && $this.siblings('ul').length){ 
     e.preventDefault(); 
     $this.siblings('ul').toggle() 
    } 
}); 

小提琴：http://jsfiddle.net/aq8QC/2/

當然，如果'這是不需要的，我會永遠使用e.stopPropagation()