Select 除了带有 jQuery -2 的按钮之外的所有按钮

Question

我有这个代码：

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

我想要 select 来自 div #filters 的所有按钮，除了唯一带有 #sort 的按钮，使用 jQuery 的 selector.

目前我已尝试通过以下代码实现此目的。

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

你能帮帮我吗？

如有任何帮助，我们将不胜感激。

Answer 1

在您的选择器中使用 .not() 并使用 找到按钮 $('#filters > button') Child Selector (“parent > child”)

你的问题和代码有点令人困惑，但它说你想在按钮上单击并从其他按钮上删除时应用 active class。

以下点击事件将在 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>

Answer 2

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

请查看下面的代码片段以获得更多理解。

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

Answer 3

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

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

Select 除了带有 jQuery -2 的按钮之外的所有按钮

Select all buttons except one with jQuery -2

html

javascript

jquery

parent-child

jquery-selectors