Question

HTML

<ul id="wrapper">
    <li>
        <ul class="pr">
            <li>
                <ul class="pr">
                    <li></li>
                    <li></li>                       
                </ul>
            </li>
            <li>
                <ul class="pr">
                    <li></li>
                    <li></li>                       
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <ul class="etc">
            <li>
                <ul class="etc">
                    <li></li>
                    <li></li>                       
                </ul>
            </li>
            <li>
                <ul class="etc">
                    <li></li>
                    <li></li>                       
                </ul>
            </li>
        </ul>
    </li>
</ul>

我希望点击每个li个元素后，他们会为他们的孩子ul添加一个课程（仅限最近ul，而不是所有ul。

怎么做？

抱歉我的英语不好。

Answer 1

$('li:has(ul)').click(function () {
    $(this).children('ul').addClass('ClassName');
});

参考文献

.click()

.addClass()

:has()

如果要将类添加到li use中的所有ul元素。find()

$('li:has(ul)').click(function () {
    $(this).find('ul').addClass('ClassName');
});

Answer 2

尝试

$('#wrapper li:has(ul)').click(function (e) {
    $(this).children('ul').toggleClass('myclass');
    e.stopPropagation();
})

演示：Fiddle

Answer 3

喜欢这个？

$('li').on('click', function(){
    // > mean one level children
    $('> ul', this).addClass('yourClass');
});

jquery <li>点击事件到子元素</li>

3 个答案: