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”将事件绑定到ul而不是class =“sublist”

目前我正在这样做：

$('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();
});

Answer 2

使用直接后代选择器

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

或者，您也可以使用children

$('ul.catlist').children('li').click(function() {

此外，其他后代子li的事件需要停止冒泡，以便直接儿童的事件处理程序不会触发。

$('ul.catlist > li li').on('click', function (e) {
    return false; // e.stopPropagation();
});

仅在特定类

2 个答案: