Question

我有HTML结构，如

<ul>
<li><a></a>
<ul>
    <li><a></a>
        <ul>
            <li><a></a>
              <ul>
               <li><a></a></li>
              </ul>
            </li>
        </ul>
    </li>
</ul>

我想添加＆＃39;有效＆＃39;相关的课程＆＃39; a＆＃39;单击相应li时的元素。

Answer 1

使用 children() 方法，因为您只想选择直接孩子

$('li').click(function(){
   $(this).children('a').addClass('active')
})

或使用 > 选择直接儿童

$('li').click(function(){
   $('>a', this).addClass('active')
})

Answer 2

＆＃13;

$('#a').on('click', function(){
    $('a', this).addClass('active');
});

＆＃13;

<ul>
<li id="a"><a></a>
<ul>
    <li id="b"><a></a>
        <ul>
            <li id="c"><a></a>
              <ul>
               <li id="d"><a></a></li>
              </ul>
            </li>
        </ul>
    </li>
</ul>

＆＃13;

Answer 3

委托点击处理程序最有可能最好地解决您的问题。

$('ul.master').on('click', 'li', function (evt) {
    evt.stopPropagation();

    // I added this line to remove active class from all other a tags
    $(this).parents('ul.master').find('a').removeClass('active');
    $(this).children('a').addClass('active');
});

请参阅此jsfiddle

您可以直接使用<a>标记来捕获更改活动类的点击。如果您需要直接使用<li>，您可以附加另一个处理程序。

$('a').click(function(evt){
    $(this).addClass('active');
});

$('li').click(clickHandler);

Answer 4

你的意思是这样的？

$('li').on('click', function(){
    $('a', this).addClass('active');
});

Answer 5

直接针对li a：

$('li a').on('click', function(){
 $(this).addClass('active')
});

Answer 6

 $('li').on('click', function(){  
       $(this).closest('a').addClass('active');  
   });

Answer 7

使用第一个孩子：首先（如果每个李只有一个锚）使用addclass方法来分配类

Answer 8

我修复了您的HTML：

＆＃xA;＆＃xA;

 ＆lt; ul＆gt;＆＃xA; ＆LT;李＆GT;＆＃XA; ＆LT; A＆gt;将＆LT; / A＆GT;＆＃XA; ＆LT; UL＆GT;＆＃XA; ＆LT;李＆GT;＆＃XA; ＆LT a取代; B＆LT; / A＆GT;＆＃XA; ＆LT; UL＆GT;＆＃XA; ＆LT;李＆GT;＆＃XA; ＆LT a取代; C＆LT; / A＆GT;＆＃XA; ＆LT; UL＆GT;＆＃XA; ＆LT;李＆GT;＆＃XA; ＆LT a取代; d＆LT; / A＆GT;＆＃XA; ＆LT; /立GT;＆＃XA; ＆LT; / UL＆GT;＆＃XA; ＆LT; /立GT;＆＃XA; ＆LT; / UL＆GT;＆＃XA; ＆LT; /立GT;＆＃XA; ＆LT; / UL＆GT;＆＃XA; ＆lt; / li＆gt;＆＃xA;＆lt; / ul＆gt;＆＃xA;

＆＃xA;＆＃xA;

jQuery + JS代码：

＆＃xA; ＆＃xA;

 ＆lt; script src =“https://code.jquery.com/jquery-3.0.0.min.js”＆gt;＆lt; / script＆gt;＆＃xA;＆lt; script类型= “文本/ JavaScript的” ＆GT;＆＃XA; $（ 'A'）上单击（函数（）{＆＃XA; $（本）.parent（ '礼'）addClass（ '激活'）＆＃。 XA;}）＆LT; /脚本＆GT;＆＃XA;

＆＃XA;

Answer 9

$(document).on('click', 'a', function(){
if($(this).parent('li').length) {
$(this).parent('li').addClass('active');
}
});

需要点击每个li元素而不影响父

9 个答案: