Zaeo Zaeo - 2 months ago 14
ASP.NET (C#) Question

Jquery select box ignore if class present

I have this code for a filter button that replaces the string in the button based on what is selected:

$(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;

});


However, I want it to ignore label headers(I use a 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>


I'm using a boostrap framework, and using ASP.Net Core framework to build the application. It is currently only on Local Machine.

Any idea how to modify the Jquery code to ignore if a specified class(.dropdown-header) is found?

Answer

You can use :not() or :has()

Using :not()

(note that you'll want to avoid .divider as well):

$(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>

Using :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>