Select all buttons except one with jQuery -2

Question

I have this code :

<div class="nav navbar-nav" id="filters">
    <button class="btn btn-default navbar-btn active" data-filter="*">Tous</button>
    <button class="btn btn-default navbar-btn" data-filter=".image">Photos</button>
    <button class="btn btn-default navbar-btn" data-filter=".movie">Vidéos</button>
    <button class="btn btn-default navbar-btn" data-filter=".text">Text Seulement</button>
    <button class="btn btn-default navbar-btn" id="sort" data-sort-value="likes">Likes</button>
</div>

I would like select all buttons from div #filters except the only one with #sort, using jQuery's selector.

Currently I have tried to achieve this by following code.

$('#filters').not('#sort').each( function( i, buttonGroup ) {
     var $buttonGroup = $( buttonGroup );
     $buttonGroup.on( 'click', 'button:not("#sort")', function() {
         $buttonGroup.find('.active').removeClass('active');
         $( this ).addClass('active');
     });
});

Can you help me ?

Any help in this would be greatly appreciated.

Answer 1

Use .not() in your selector and find buttons as $('#filters > button') by using Child Selector (“parent > child”)

Your question and code is bit confusing but It says that you want to apply the active class on button when it clicked and removed from other buttons.

The following click event will work on all the buttons except #sort.

$('#filters > button').not($('#sort')).click(function(){
  $('#filters > button').removeClass('active');
  $(this).addClass('active');
});

$('#filters > button').not($('#sort')).click(function(){
  $('#filters > button').removeClass('active');
  $(this).addClass('active');
});

.active{
 background-color: red;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                    <div class="nav navbar-nav" id="filters">
                        <button class="btn btn-default navbar-btn active" data-filter="*">Tous</button>
                        <button class="btn btn-default navbar-btn" data-filter=".image">Photos</button>
                        <button class="btn btn-default navbar-btn" data-filter=".movie">Vidéos</button>
                        <button class="btn btn-default navbar-btn" data-filter=".text">Text Seulement</button>
                        <button class="btn btn-default navbar-btn" id="sort" data-sort-value="likes">Likes</button>
                    </div>