jQuery метод .filter()

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

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

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

jQuery синтаксис:

Синтаксис 1.0:
$( selector ).filter( selector )
$( selector ).filter( function( index, element ))

selector - Selector
function - Function
index - Integer
element - Element элемент DOM

Синтаксис 1.6:
$( selector ).filter( elements )
$( selector ).filter( selection )

elements - Element один, или несколько элементов DOM
selection - объект jQuery

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

1.0 (синтаксис обновлен в версии 1.6)

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование jQuery метода filter()</title>
		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
		<script>
	$( document ).ready(function(){
	  $( ".withSelector" ).click(function(){ // вызываем функцию при нажатии на элемент с классом parent
	    $( "*" ).css( "border", "none" ); // с использованием универсального селектора убираем границы у всех элементов
	    $( "li" ).filter(".level2") // фильтруем элементы <li>
		     .css( "border", "1px solid green" ); // устанавливаем сплошную границу размером 1 пиксель зеленого цвета
	  })
	  $( ".withFunction" ).click(function(){ // вызываем функцию при нажатии на элемент с классом parents
	    $( "*" ).css( "border", "none" ); // с использованием универсального селектора убираем границы у всех элементов
	    $( "li" ).filter(function( i, elem ){
	      console.log(i % 2 == 0); // выводим в консоль логическое значение, определяющее результат вычисления деления индекса элемента на два и сравниваем результат с нулем
	      return i % 2 == 0; // возвращаем логическое значение, определяющее результат вычисления деления индекса элемента на два и сравниваем результат с нулем
	    }).css( "border", "1px solid green" ); // устанавливаем сплошную границу размером 1 пиксель зеленого цвета
	  })
	});
		</script>
	</head>
	<body>
		<button class="withSelector">selector</button>
		<button class="withFunction">function</button>
		<ul>
			<li>Уровень 1</li>
			<li>Уровень 1</li>
			<li>Уровень 1
				<ul>
					<li>Уровень 2</li>
					<li class ="level2">Уровень 2</li>
					<li>Уровень 2
						<ul>
							<li>Уровень 3</li>
							<li>Уровень 3</li>
							<li>Уровень 3</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</body>
</html>

В этом примере мы разместили следующие две кнопки (элемент <button>):

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

Пример использования jQuery метода filter()
Отличие метода .filter() от .children()
jQuery перемещения