如何僅通過jQuery獲取點擊的子列表項目？

我有一個多級無序列表。我正在嘗試將點擊處理程序附加到列表項中，並且當它被單擊時，我試圖向其添加類active，但是當子列表項被單擊時，觸發了雙擊事件處理程序和它的父級處理程序的點擊處理程序，我認爲這是因爲它在各個層面都有相同的元素li。我如何才能將活動僅附加到某個級別？如何僅通過jQuery獲取點擊的子列表項目？

這裏是一個代碼示例，但點擊的jsfiddle看到它在行動：

HTML標記

<ul> 
    <li>test</li> 
    <li>test 
    <ul> 
     <li>test</li> 
     <li>test 
    <ul></li> 
    <li>test</li> 
    <li>test</li> 
</li> 
<li>test</li> 
<li>test</li> 
</ul>

JAVASCRIPT

$("li").click(multiLevelClickHandler); 
function multiLevelClickHandler(event) 
{ 
    event.preventDefault(); 
    var $this = $(this); 
    console.log($this); 
    var $actives = $this.siblings().find(".active"); 

    if($actives.length > 0){ 
     $actives.removeClass('active'); 
     setTimeout(function(){ 
      $this.addClass('active'); 
     }, 250); 
    } else { 
     $this.addClass('active'); 
    } 
}

這裏的jsfiddle：http://jsfiddle.net/zcLzA/

我嘗試將點擊處理程序單獨附加到每個級別的列表項目，但它總是附加到父級以及點擊列表項目。

來源

2014-07-17 Suthan Bala

使用event.stopPropagation();：

function multiLevelClickHandler(event){ 
    event.stopPropagation();

這將停止從冒泡的DOM事件。

http://jsfiddle.net/zcLzA/2/

裁判：http://api.jquery.com/event.stoppropagation/

來源

2014-07-17 19:12:45

使用event.stopPropagation()你multiLevelClickhandler（）函數的末尾。

來源

2014-07-17 19:15:41 Ryaden

$（'li'）作爲選擇器沒有限定符。在你的JsFiddle中，你使用一個父元素來限定選擇器來查找元素，然後找到任何li，它是該父元素中ul元素的子元素。如果我正確理解您的要求，您打算針對事件的特定級別的嵌套列表。

若要進一步過濾，請通過提供更多限定符來調整到適當的級別。這可以是類或元素選擇器（或任何數量的精確選擇所需級別的創造性方法）。

// class selector 
$('ul.levelClass li');

或

// element selector 
$('ul ul /* repeat for the number of levels */ li');

處理這種低效率的方法是檢查事件的目標是一個元素的子元素等等等等，以一個元素的子達到你的要求，但是這樣做是混亂和不必要的假設你只是想處理程序連接到您的嵌套列表中的一個特定的水平

更新

要解決您的評論以及您遇到的問題，請遵循其他解決方案（event.stopPropagation（）或event.stopImmediatePropagation（））中的建議以及我的建議來解決此問題。如果您選擇要附加的處理程序後的水平冒泡停止時，您接收事件

在代碼中的一個例子停止父：

elemContainer.find('ul.nestedLevelClass li').on("click", SpecificLevelHandler) 

var SpecificLevelHandler = function(oEvent) 
{ 
    oEvent.stopPropagation() // stop the event from bubbling up 
    // oEvent.stopImmendiatePropagation() // stop the event from firing any other handlers at all 
    var oElem = $(this); 
    /* Handle the event */ 
}

來源

2014-07-17 19:17:28

這裏的問題是，無論我點擊什麼位置，父母也會被點擊，因爲該子項包含在父項中。想一想點擊頁面上的鏈接的場景。當你點擊鏈接時，你也點擊了正文。 –

我已更新我的答案以解決此問題。 –

如何僅通過jQuery獲取點擊的子列表項目？

回答

相關問題