使用 jQuery -2 选择除一个以外的所有按钮答案

【问题标题】：Select all buttons except one with jQuery -2使用 jQuery -2 选择除一个以外的所有按钮
【发布时间】：2026-02-03 01:50:01
【问题描述】：

我有这个代码：

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

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

目前我已经尝试通过以下代码来实现这一点。

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

你能帮帮我吗？

我们将不胜感激。

【问题讨论】：

你不需要 .not('#sort') 休息它应该可以工作 jsfiddle.net/satpalsingh/fvkmn2bu

标签： javascript jquery html jquery-selectors parent-child

【解决方案1】：

在您的选择器中使用 .not() 并使用 Child Selector (“parent > child”)

找到按钮为 $('#filters > button')

您的问题和代码有点令人困惑，但它表示您想在按钮单击并从其他按钮中删除时应用 active 类。

以下点击事件将作用于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>

【讨论】：

【解决方案2】：

使用$("#filters *").not("#sort") 选择器。

请查看下面的 sn-p 以获得更多理解。

$("#filters button").on("click",function(){
  $("#filters *").not("#sort").removeClass('active');
  $(this).not("#sort").addClass('active');
});

.active{
  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>

【讨论】：

【解决方案3】：

您可以像这样使用 css :not 选择器：

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

【讨论】：