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

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

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>