Question

我有这段代码：

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

我想从div #filters中选择所有按钮，除了唯一一个#sort，使用jQuery的选择器。

目前我有这个，但它不起作用：

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

你能帮助我吗？

Answer 1

您的选择器应如下所示

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

＆＃13;

$('#filters button').not('#sort').css('background', 'blue')

＆＃13;

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

＆＃13;

Answer 2

点击按钮的ID不是sort ...

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

Answer 3

您可以使用：not jquery selector。

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

*已更新以反映OP中的说明。

Answer 4

另外：

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

示例：

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

会做这项工作。这样可以确保只有div内的按钮（排序按钮的兄弟）才会受到影响。

Answer 5

您可以使用:not()选择器，如：

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

希望这有帮助。

＆＃13;

$('#filters button:not(#sort)').prop('disabled', 'true')

＆＃13;

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

＆＃13;

或者您可以使用@ Robiseb评论中提到的数据属性进行过滤：

$('[data-filter]')

＆＃13;

$('[data-filter]').prop('disabled', 'true')

＆＃13;

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

＆＃13;

Answer 6

另一种可能性，考虑到id有时无法获得，是：

选择除具有data-sort-value属性的按钮之外的所有按钮：

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

示例：

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

选择除jQuery之外的所有按钮

6 个答案: