如果类存在，则 Jquery 选择框忽略

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;

});

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

<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 Core 框架来构建应用程序。它目前仅在本地计算机上。

知道如果找到指定的类（.dropdown-header），如何修改 Jquery 代码以忽略？

Answer 1

您可以使用:not() 或: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>