CODEWITHSUNDEEP
javascriptjqueryhtml
doums
doums

Reputation: 450

Select all buttons except one with jQuery

I have this code :

<div id="filters" class="button-group">
    <button class="button is-checked" data-filter="*">Tous</button>
    <button class="button" data-filter=".image">Photos</button>
    <button class="button" data-filter=".movie">Vidéos</button>
    <button class="button" data-filter=".text">Text Seulement</button>
    <button class="button" 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 this but it doesn't work :

$('#filters').not('#sort').on( 'click', 'button', function() {
...
    }

Can you help me ?

Upvotes: 1

Views: 4215

Answers (6)

Jacobalo
Jacobalo

Reputation: 363

You can use the :not jquery selector.

$("#filters button:not(#sort)").on( 'click', function(){...});

*Updated to reflect clarification in OP.

Upvotes: 2

Frank Orellana
Frank Orellana

Reputation: 1918

Also: 

$('#sort').siblings('button').click(....)

Example:

<div id="filters" class="button-group">
    <button class="button is-checked" data-filter="*">Tous</button>
    <button class="button" data-filter=".image">Photos</button>
    <button class="button" data-filter=".movie">Vidéos</button>
    <button class="button" data-filter=".text">Text Seulement</button>
    <button class="button" id="sort" data-sort-value="likes">Likes</button>
</div>
<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript">
    $(function(){
        $('#sort').siblings('button').click(function(){
            alert('I am not the sort button');
         });
    });
</script>

would do the work. This ensures only buttons inside of your div (siblings of the sort button) are affected.

Upvotes: 1

Jack jdeoel
Jack jdeoel

Reputation: 4584

Click on button's id is not sort ...

$('#filters').on( 'click', 'button:not("#sort")', function() {
...
    }

Upvotes: 3

gaetanoM
gaetanoM

Reputation: 42054

Another possibility, considering the id sometimes are not available, is:

select all buttons except the one with data-sort-value attribute:

$('#filters button:not([data-sort-value])')

Example:

$('#filters button:not([data-sort-value])').each(function(index, element) {
  console.log(element.textContent);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="filters" class="button-group">
    <button class="button is-checked" data-filter="*">Tous</button>
    <button class="button" data-filter=".image">Photos</button>
    <button class="button" data-filter=".movie">Vidéos</button>
    <button class="button" data-filter=".text">Text Seulement</button>
    <button class="button" id="sort" data-sort-value="likes">Likes</button>
</div>

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

You could use :not() selector like :

$('#filters button:not("#sort")')

Hope this helps.

$('#filters button:not(#sort)').prop('disabled', 'true')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="filters" class="button-group">
  <button class="button is-checked" data-filter="*">Tous</button>
  <button class="button" data-filter=".image">Photos</button>
  <button class="button" data-filter=".movie">Vidéos</button>
  <button class="button" data-filter=".text">Text Seulement</button>
  <button class="button" id="sort" data-sort-value="likes">Likes</button>
</div>

Or you can filter using data attribute as mentioned in @Robiseb's comment :

$('[data-filter]')


$('[data-filter]').prop('disabled', 'true')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="filters" class="button-group">
  <button class="button is-checked" data-filter="*">Tous</button>
  <button class="button" data-filter=".image">Photos</button>
  <button class="button" data-filter=".movie">Vidéos</button>
  <button class="button" data-filter=".text">Text Seulement</button>
  <button class="button" id="sort" data-sort-value="likes">Likes</button>
</div>

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122095

Your selector should look like this 

$('#filters button').not('#sort')


$('#filters button').not('#sort').css('background', 'blue')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="filters" class="button-group">
  <button class="button is-checked" data-filter="*">Tous</button>
  <button class="button" data-filter=".image">Photos</button>
  <button class="button" data-filter=".movie">Vidéos</button>
  <button class="button" data-filter=".text">Text Seulement</button>
  <button class="button" id="sort" data-sort-value="likes">Likes</button>
</div>

Upvotes: 6

Related Questions