javascript - 仅将 JQuery 应用于特定类的 的第一级子级

Question

如何从这样的列表中仅选择父级的链接元素？

<ul class="catlist">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a>
        <ul class="sublist">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

如何使用 class= "catlist"而不是 class="sublist"将事件绑定(bind)到 ul

目前我正在这样做:

$('ul.catlist').find('li').click(function () {
    // doing something
});

Answer 1

您需要手动处理该案例

$('ul.catlist > li').click(function (e) {
    if ($(e.target).closest('ul').hasClass('catlist')) {
        console.log('clicked')
    }
});

<小时/>

另一种选择是停止从内部 li 元素传播事件

$('ul.catlist > li').click(function (e) {
    //do something
});

$('ul.catlist ul').click(function (e) {
    e.stopPropagation();
});