jQuery метод .not()

Определение и применение

jQuery метод .not() исключает элементы, которые соответствуют определенным критериям из набора совпавших элементов.

jQuery синтаксис:

Синтаксис 1.0:

JavaScript
$( selector ).not( selector )

selector - Selector, DOM Element, или Array

Синтаксис 1.4:

Код
$( selector ).not( selection )
$( selector ).not( function( index, element ) )

selection - jQuery (объект)

function - Function

index - Integer

element - Element (DOM)

Добавлен в версии jQuery

1.0 (синтаксис расширен в версии 1.4)

Значения параметров

Параметр Описание
selector Строка, содержащая выражение селектор, элемент DOM, или массив элементов, которые будут исключены из текущего набора совпавших элементов.
function Функция, используемая в качестве теста для каждого элемента набора. Если функция возвращает true, то элемент удаляется, в противном случае элемент сохраняется. Внутри функции this ссылается на текущий элемент DOM.
Функция принимает два аргумента:
  • index - индекс элемента в коллекции jQuery.
  • element - элемент DOM.
selection Объект jQuery, элементы которого будут исключены из текущего набора совпавших элементов.

Пример использования

Метод .not() — пример 1

Нажмите ▶. Используйте кнопки в результате и наблюдайте изменения. Измените JavaScript и запустите пример повторно. Используется jQuery 3.1.1.

index.html
HTML
<button>Клик</button>
<p>Первый параграф</p>
<p class="me" id="me">Второй параграф</p>
<p>Третий параграф</p>
main.js
JavaScript
$(document).ready(function () {
    $('p').not('.me').css('background', '#000') // выбираем все элементы <p> кроме элемента с классом me
    $('p').not(document.getElementById('me')).css('color', '#fff') // выбираем все элементы <p> кроме элемента с id me
})
style.css
CSS
body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием jQuery метода .not() мы удаляем элементы, которые не соответствуют определенным критериям из набора совпавших элементов, в первом случае это элемент с классом me, а во втором элемент DOM с одноименным id. Цвет текста и заднего фона оставшимся после выбора элементам <p> устанавливается с помощью jQuery метода .css().

Рассмотрим пример в котором в качестве параметра метода .not() передадим функцию:

Метод .not() — пример 2

Нажмите ▶. Используйте кнопки в результате и наблюдайте изменения. Измените JavaScript и запустите пример повторно. Используется jQuery 3.1.1.

index.html
HTML
<button>Клик</button>
<p>Раз</p>
<p>Два</p>
<p>Три</p>
main.js
JavaScript
$(document).ready(function () {
    $('p')
        .not(function (index, text) {
            // передаем функцию в качестве параметра метода
            return index % 2 != 0 // если остаток от деления индекса элемента на 2 не равен нулю возвращаем логическое значение true (элемент удаляется), если равен то false
        })
        .css('color', 'green') // устанавливаем цвет текста
})
style.css
CSS
body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием jQuery метода .not() и функции, переданной в качестве параметра метода, мы проверяем, что если остаток от деления индекса элемента на 2 не равен нулю, то функция возвращает логическое значение true (элемент удаляется), если равен, то false, в результате чего все четные элементы <p> не получат стили, устанавливаемые методом .css().