jQuery - filter (метод)

Статья, в которой рассматривается метод библиотеки jQuery .filter().

Метод .filter(выражение) предназначен для выбора из текущего набора только тех элементов, которые соответствуют выражению, указанному в качестве его параметра. Все выбранные элементы данный метод возвращает в качестве нового объекта jQuery.

Представим принцип работы метода .filter() в виде следующей схемы:

jQuery - метод .filter()

Теперь давайте рассмотрим, что может использоваться в качестве параметра данного метода. Метод .filter() позволяет использовать в качестве значения своего параметра селектор, функцию, DOM-элементы или набор элементов в виде объекта jQuery. Т.е. в библиотеке jQuery существует 4 разных варианта реализации метода .filter().

jQuery - Значения, которые могут использоваться в качестве параметра метода .filter()

Познакомимся с каждым из вариантов реализации метода .filter() более подробно.

Данный вариант метода использует в качестве параметра строку, содержащую селектор. Принцип работы метода .filter("селектор") заключается в следующем: он выбирает из первоначального набора только те элементы, которые соответствуют указанному селектору.

Рассмотрим работу данного метода на следующем примере:

<ul>
  <li>1 элемент</li>  
  <li>2 элемент</li> <!-- Будет выбран этот элемент (индекс 1) -->
  <li>3 элемент</li>
  <li>4 элемент</li> <!-- Будет выбран этот элемент (индекс 3) -->
</ul>

<script>
  $("li").filter(":odd");
</script>

В первой части конструкции $("li") выбираются все элементы li из текущего документа и возвращаются в виде объекта jQuery. Во второй части представленной выше конструкции к текущей выборке применяется фильтр .filter(":odd"), который выбирает из текущего набора только те элементы, которые имеют нечётный индекс (1 и 3). Все выбранные элементы данный метод возвращает в виде нового объекта jQuery.

Этот вариант метода .filter() имеет в качестве параметра функцию, через которую пропускается каждый элемент текущего набора. Все элементы для которых функция вернула значение true отбираются, т.е. они прошли тест. После этого метод .filter() конструирует новый jQuery объект, состоящий из выбранных элементов. Для того чтобы обратиться к текущему объекту внутри функции, используйте ключевое слово this.

Рассмотрим работу данного метода на следующем примере:

<ul>
  <li>1 элемент</li> <!-- Будет выбран этот элемент -->
  <li>2 элемент</li>
  <li>3 элемент</li> <!-- Будет выбран этот элемент -->
  <li>4 элемент</li>
</ul>

<script>
$('li').filter(function(index) {
  return index % 2 === 0;
});
</script>

На первом шаге $('li') вышеуказанная конструкция выбирает все элементы li из текущего документа и возвращает их в виде объекта jQuery. На следующем этапе к текущей выборке применяется фильтр (.filter( function(index) {return index % 2 === 0;})), содержащий функцию, которая тестирует каждый элемент текущей выборки с помощью кода (тела) этой функции и отбирает из неё только те элементы, для которых функция возвратила истинное значение (true). После этого данный метод (.filter()) конструирует новый объект jQuery, в который помещает только выбранные элементы, т.е. те для которых тест прошёл успешно (функция вернула значение true).

Третий вариант использования метода .filter() позволяет в качестве параметра использовать DOM-элемент или коллекцию DOM-элементов. В этом случае данный метод будет выбирать из текущей выборки только те элементы, которые соответствуют DOM-элементам, указанным в качестве параметра.

Рассмотрим работу данного метода на следующем примере:

<ul>
  <li>1 элемент</li>  <!-- Будет выбран этот элемент -->
  <li>2 элемент</li>
  <li>3 элемент</li>
  <li>4 элемент</li>
</ul>

<script>
$("li").filter(document.querySelectors("li:first-child"));
</script>

В первой части конструкции $("li") выбираются все элементы li из текущего документа и возвращаются в виде объекта jQuery. Во второй части представленной выше конструкции к текущей выборке применяется фильтр .filter(document.querySelectors("li:first-child")), который из первоначальной выборки выбирает только элементы li, являющиеся первым ребёнком своего родителя. После этого данный метод конструирует новый объект jQuery, в который помещает все выбранные элементы.

В качестве параметра метода .filter() также можно использовать набор элементов, находящихся в объекте jQuery. Эти элементы будут являться тем критерием, в соответствии с которым будут отбираться элементы из первоначального набора.

Рассмотрим работу данного метода на следующем примере:

<ul id="list">
  <li>1 элемент</li> <!-- Будет выбран этот элемент -->
  <li>2 элемент</li> <!-- Будет выбран этот элемент -->
  <li>3 элемент</li> <!-- Будет выбран этот элемент -->
  <li>4 элемент</li> <!-- Будет выбран этот элемент -->
</ul>
<ul>
  <li>1 элемент</li>
  <li>2 элемент</li>
  <li>3 элемент</li>
  <li>4 элемент</li>
</ul>

<script>
$("li").filter($("#list>li"));
</script>

На первом шаге ($("li")) вышеуказанная конструкция выбирает все элементы li (8) из текущего документа и возвращает их в виде объекта jQuery. На следующем этапе к текущей выборке применяется фильтр .filter($("#list li")), который из первоначальной выборке выбирает элементы li, расположенные непосредственно в элементе с id="list". После этого данный метод конструирует новый объект jQuery, в который помещает все выбранные элементы.



   JavaScript и jQuery 0    884 0

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.