jQuery выберите детей только в том случае, если контейнер НЕ имеет определенный класс

Question

Я хочу привязать функцию зависания к дочерним элементам div, НО только если этот div не имеет определенного класса. Для того, чтобы проиллюстрировать мои намерения - я хочу функцию парения, чтобы срабатывать при мыши входом любого элемента «.hover кнопки», КРОМЕ контейнер «.column» не имеет класса «.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's :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 имеет 'инвалид' класс вроде этого:

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

Answer 3

Использовать метод не

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

Answer 4

Вы можете использовать :not() в селекторе, чтобы исключить элементы, соответствующие другому селектору.

Но если класс будет динамически изменяться, вам необходимо использовать привязку делегирования, а не привязку к нормальному событию.

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

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

я должен был использовать mouseenter и mouseleave потому hover не реальное событие, так что вы не можете связать его при делегировании.