如何仅通过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获取点击的子列表项目？

回答

相关问题