Jquery select 框忽略如果 class 存在

Question

我有一个过滤器按钮代码，它根据所选内容替换按钮中的字符串：

$(document.body).on('click', '.dropdown-menu li', function (event) { // Filter Select replacement

    var $target = $(event.currentTarget);

    $target.closest('.btn-group')
       .find('[data-bind="label"]').text($target.text())
          .end()
       .children('.dropdown-toggle').dropdown('toggle');

    return false;

});

但是，我希望它忽略标签 headers（我使用 css class）

<div class="btn-group btn-input clearfix pull-right">
    <button type="button" class="btn btn-success btn-sm dropdown-toggle form-control pos-abs" data-toggle="dropdown">
        <span data-bind="label">Filter</span> <span class="caret"></span> <!--Filter for Stock Watch-->
    </button>
    <ul class="dropdown-menu" role="menu">
        <li class="dropdown-header">Suppliers</li>
        <li><a href="#">Fictional Supplier</a></li>
        <li><a href="#">Fictional Supplier 2</a></li>
        <li class="divider"></li>
        <li class="dropdown-header">Stock</li>
        <li><a href="#">Ok</a></li>
        <li><a href="#">Low Stock</a></li>
        <li><a href="#">Suspended</a></li>
        <li><a href="#">New Shipment</a></li>
    </ul>
</div>

我正在使用 boostrap 框架，并使用 ASP.Net 核心框架来构建应用程序。目前仅在本地计算机上。

知道如何修改 Jquery 代码以在找到指定的 class(.dropdown-header) 时忽略吗？

Answer 1

您可以使用:not() or :has()

使用:not()

（请注意，您也要避免 .divider）：

$(document.body).on('click', '.dropdown-menu li:not(.dropdown-header, .divider)', function (event) {
    console.log('clicked');
});

$(document.body).on('click', '.dropdown-menu li:not(.dropdown-header, .divider)', function (event) {
    console.log('clicked');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group btn-input clearfix pull-right">
    <button type="button" class="btn btn-success btn-sm dropdown-toggle form-control pos-abs" data-toggle="dropdown">
        <span data-bind="label">Filter</span> <span class="caret"></span> <!--Filter for Stock Watch-->
    </button>
    <ul class="dropdown-menu" role="menu">
        <li class="dropdown-header">Suppliers</li>
        <li><a href="#">Fictional Supplier</a></li>
        <li><a href="#">Fictional Supplier 2</a></li>
        <li class="divider"></li>
        <li class="dropdown-header">Stock</li>
        <li><a href="#">Ok</a></li>
        <li><a href="#">Low Stock</a></li>
        <li><a href="#">Suspended</a></li>
        <li><a href="#">New Shipment</a></li>
    </ul>
</div>

使用:has():

$(document.body).on('click', '.dropdown-menu li:has(a)', function (event) {
    console.log('clicked');
});

$(document.body).on('click', '.dropdown-menu li:has(a)', function (event) {
    console.log('clicked');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group btn-input clearfix pull-right">
    <button type="button" class="btn btn-success btn-sm dropdown-toggle form-control pos-abs" data-toggle="dropdown">
        <span data-bind="label">Filter</span> <span class="caret"></span> <!--Filter for Stock Watch-->
    </button>
    <ul class="dropdown-menu" role="menu">
        <li class="dropdown-header">Suppliers</li>
        <li><a href="#">Fictional Supplier</a></li>
        <li><a href="#">Fictional Supplier 2</a></li>
        <li class="divider"></li>
        <li class="dropdown-header">Stock</li>
        <li><a href="#">Ok</a></li>
        <li><a href="#">Low Stock</a></li>
        <li><a href="#">Suspended</a></li>
        <li><a href="#">New Shipment</a></li>
    </ul>
</div>