jQuery select children 仅当容器没有某些 class

Question

我想将悬停功能附加到 div 的 children，但前提是此 div 没有某些 class。为了说明我的意图——我希望在鼠标进入任何“.hover-button”元素时触发悬停功能，除非容器“.column”添加了class“.disabled”：

 $('.hover-button').hover( function() { 
   //showing tooltip
 } );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="column">
  <div class="hover-button"></div>
  <div class="hover-button"></div>
  <div class="hover-button"></div>
</div>

<div class="column disabled">
  <div class="hover-button"></div>
  <div class="hover-button"></div>
  <div class="hover-button"></div>
</div>

Answer 1

您可以使用 jQuery 的 :not 选择器。看看这段代码，尤其是这段代码

.column:not(.disabled) > .hover-button

$('.column:not(.disabled) > .hover-button').on("mouseover", function() { 
    $(this).css({"background": "gold"}); 
 }).on("mouseout", function() {
    $(this).css({"background": "white"});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="column">
  <div class="hover-button">Hover Here</div>
  <div class="hover-button">And Here</div>
  <div class="hover-button">And Here</div>
</div>

<div class="column disabled">
  <div class="hover-button">But not here</div>
  <div class="hover-button">Or here</div>
  <div class="hover-button">Or here</div>
</div>

Answer 2

您可以检查父 div 是否具有 'disabled' class，如下所示：

if ($(this).parent().hasClass('disabled')) {
    return false;
}

Answer 3

使用 Not 方法

 $('.column:not(.disabled)')

Answer 4

您可以在选择器中使用 :not() 来排除与另一个选择器匹配的元素。

但是如果class会动态变化，你需要使用委托绑定，而不是普通的事件绑定。

$(document).on({
    mouseenter: function () {
        // show tooltip
    },

    mouseleave: function () {
        // remove tooltip
    }
}, '.column:not(.disabled)');

我不得不使用 mouseenter 和 mouseleave 因为 hover 不是真实的事件，所以你不能在委托时绑定它。

jQuery select children 仅当容器没有某些 class

jQuery select children only if container NOT have certain class

jquery

jquery-selectors