Селектор not Jquery. Выбрать все, что не является селектором. Инверсия.

Недавно столкнулся с задачей: нужно было выбрать все элементы на странице, кроме одного.

Если элементов не так много, то для каждого из них можно написать свой селектор, но если число элементов переваливает за несколько десятков, это может быть очень трудоемко. Есть более изящное решение, как можно добиться такого же эффекта.

Можно воспользоваться инверсией. В библиотеке Jquery есть специальный селектор, который позволяет выбрать все элементы кроме одного. Называется этот селектор :not.

Синтаксис здесь следующий:

:not(селектор)

Давайте рассмотрим пример, в котором имеются 3 блока div:

<div id="first"></div>
<div id="second"></div>
<div id="third"></div>

Задача простая, при наведении курсора мыши на первый блок (с id="first"), два других блока должны получить желтый фон, когда курсор уходит, то они снова должны стать белыми.

Посмотрите, как это работает здесь:

Для того, чтобы все заработало, нужно несколько строк кода:

$('#first').hover(
 function() {
    $('div:not("#first")').css("background-color", "yellow");
 },
 function() {
    $('div:not("#first")').css("background-color", "white");
 }
);

По сути, мы говорим, что если это НЕ элемент first, то делай то-то.

Представляете насколько бы увеличился этот код, если бы элементов было несколько сотен, и мы бы вручную указывали селектор для каждого из них?

Поэтому селектор not, имеет смысл применять в некоторых случаях.

Я взял его себе на вооружение.