jQuery метод .not()

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

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

jQuery синтаксис:

Синтаксис 1.0:
$( 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, элементы которого будут исключены из текущего набора совпавших элементов.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода .not()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( "p" ).not( ".me" ).css( "background", "#000" ); // выбираем все элементы <p> кроме элемента с классом me
	  $( "p" ).not( document.getElementById( "me" ) ).css( "color", "#fff" ); // выбираем все элементы <p> кроме элемента с id me
	});
		</script>
	</head>
	<body>
		<button>Клик</button>
		<p>Первый параграф</p>
		<p class = "me" id = "me">Второй параграф</p>
		<p>Третий параграф</p>
	</body>
</html>

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

Результат нашего примера:

Пример использования jQuery метода .not()

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование функции в качестве параметра метода .not()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){	  
          $("p").not(function( index, text ){ // передаем функцию в качестве параметра метода 	
            return index % 2 != 0 ;  // если остаток от деления индекса элемента на 2 не равен нулю возвращаем логическое значение true (элемент удаляется), если равен то false
	  }).css( "color", "green" ); // устанавливаем цвет текста
	});
		</script>
	</head>
	<body>
		<button>Клик</button>
		<p>Раз</p>
		<p>Два</p>
		<p>Три</p>
	</body>
</html>

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

Результат нашего примера:

Пример использования функции в качестве параметра метода .not().

jQuery перемещения