Фильтрация элементов

В этой статье рассмотрим методы jQuery для фильтрации набора элементов: eq, even, filter, first, has, is, last, map, not, odd и slice.

Методы jQuery для фильтрации набора элементов

eq по индексу
even четные
filter по селектору, DOM-элементам, другому набору или посредством функции
first первый элемент
has оставляет только те элементы, у которых есть потомок, соответствующий указанному селектору или DOM-элементам
is возвращает результат проверки набора на соответствие селектору, DOM-элементам, другому набору или посредством функции
last последний элемент
map создаёт новый набор из значений возвращающих функцией для каждого элемента исходного набора
not удаляет из набора элементы, которые соответствуют указанным
odd нечётные
slice по индексам в указанном диапазоне

eq

eq предназначен для уменьшения выборки до одного элемента по указанному индексу.

Синтаксис:

.eq(index)

index – индекс элемента, который нужно оставить в наборе. Если index отрицательное число, то отсчёт ведётся с конца. В противном случае – сначала.

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

Пример фильтрации набора с помощью eq:

<ul id="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<script>
// получим элементы <li> в #list
var $li = $('#list>li');
// оставим в выборке только первый элемент
var $firstLi = $li.eq(0);
// оставим в выборке предпоследний элемент
var $penultLi = $li.eq(-2);
</script>

even

even предназначен для уменьшения выборки, оставляет в ней только чётные (нумерация в наборе осуществляется с 0).

Синтаксис:

.even()

Пример фильтрации набора с помощью even:

<ul id="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

<script>
// получим элементы <li> в #list
var $li = $('#list>li');
// оставим только чётные
var $even = $li.even(); // One, Three, Five
$even.css('background-color', 'yellow');
</script>

filter

filter предназначен для фильтрации набора по селектору, DOM-элементам, другому набору или посредством функции.

Для примера возьмём список, состоящий из 5 элементов <li>:

<ul id="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

Фильтрация по селектору

var set1 = $('#list>li').filter(':odd'); // 2, 4

Код, приведённый выше, применяет к набору $('#list>li') фильтр filter(':odd'). Этот фильтр оставляет в наборе только те элементы, которые имеют нечётный индекс.

Фильтрация посредством функции

Элементы, для которых функция вернула значение true остаются в наборе, остальные – нет:

var set2 = $('#list>li').filter(function (index, elem) {
  // возвращает true, если контент элемента при его преобразовании к числу делится на 2 без остатка
  return parseInt($(this).text()) % 2 === 0;
}); // 2, 4

В функции:

index индекс элемента в наборе
elem текущий элемент

Кроме elem, обратиться к текущему элементу в функции можно с помощью ключевого слова this.

Фильтрация по DOM-элементам

В этом сценарии filter оставит в наборе только те элементы, которые соответствуют DOM-элементам, переданным ему в качестве аргумента:

var $domElem = document.querySelector('li:first-child');
var set3 = $('#list>li').filter($domElem); // 1

Фильтрация по другому набору элементов

В этом примере в качестве фильтра используем набор элементов $evens:

var $evens = $('#list>li:even');
var set4 = $('#list>li:even').filter($evens); // 1, 3, 5

first

first используется для уменьшения выборки до первого элемента.

Синтаксис first:

.first()

В качестве результата метод first возвращает объект jQuery, состоящий из первого элемента выборки.

Действия метода first() аналогичны eq(0).

Пример фильтрации выборки с помощью first:

<div class="message">
  <span>text 1...</span>
  <span>text 2...</span>
</div>

<script>
// оставим в выборке $('.message>span') первый элемент
var $firstElem = $('.message>span').first();
// установим тексту первого элемента красный цвет
$firstElem.css('color', 'red');
</script>

has

has применяется для фильтрации набора элементов, оставляет в нём только те элементы, у которых есть потомок, соответствующий указанному селектору или DOM-элементам.

Пример, в котором оставим в выборке только те элементы, у которых имеется потомок <ul>.

<ul id="list">
  <li>1</li>
  <li>2
    <ul>
      <li>2-1</li>
      <li>2-2</li>
    </ul>
  </li>
  <li>3</li>
  <li>4</li>
</ul>

<script>
var $list = $('#list');
// с использованием селектора
var set1 = $list.has('ul');
// с использованием DOM-элементов
var $ul = document.querySelectorAll('ul');
var set2 = $list.has($ul);
</script>

is

is используется для проверки набора на соответствие селектору, DOM-элементам, другому набору или посредством функции. Метод is возвращает true, если хотя бы один из элементов набора соответствует указанным. В противном случае возвращает false.

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

<ul id="list">
  <li>1</li>
  <li class="active">2</li>
  <li>3</li>
</ul>

С использованием селектора

var $list = $('#list>li');
var result = $list.is('.active'); // true
var result = $list.is('ul'); // false

С использованием функции

Метод is возвращает true, если проверку проходит хотя бы один элемент из текущего набора (т.е. функция возвращает значение true). В противном случае is вернёт false.

var $list = $('#list>li');
var result = $list.is(function(index, element) {
  // index – индекс элемента в наборе
  //element - текущий элемент (обратиться к текущему элементу можно также с помощью this)
  if ($(this).hasClass('active')) {
    return true;
  }
});

С использованием набора

var $list = $('#list>li');
var $elements = $('.active');
var result = $list.is($elements); // true

С использованием DOM-элементов

var $list = $('#list>li');
var $elements = document.querySelectorAll('.active');
var result = $list.is($elements); // true

last

last применяется для уменьшения выборки до последнего элемента.

Синтаксис last:

.last()

В качестве результата last возвращает выборку, состоящую из последнего элемента.

Метод last() выполняет действия аналогичные eq(-1).

Например, оставим в выборке только последний элемент:

<ul id="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<script>
// выберем элементы <li> в #list
var $li = $('#list>li');
// отфильтруем выборку, оставив в ней только последний элемент
var $lastLi = $li.last();
</script>

map

map предназначен для создания нового набора из текущего. Выполняется это посредством прогона каждого элемента набора через функцию. Новый набор создаётся из значений возвращаемых функцией.

Создадим с помощью map новый набор, состоящий из значений элементов <li> имеющих класс active:

<ul id="list">
  <li>1</li>
  <li class="active">2</li>
  <li class="active">3</li>
  <li>4</li>
</ul>

<script>
var active = $('#list>li').map(function(index,  element) {
  // index - индекс (порядковый номер) элемента в наборе
  //element - текущий DOM-элемент (обратиться к текущему элементу можно также с помощью this)
  if ($(this).hasClass('active')) {
    return $(this).text();
  }
})
</script>

Поскольку возвращаемое значение представляет собой объект jQuery, содержащий массив, то его обычно переводят в обычный массив с помощью метода get.

var active = $('#list>li').map(function() {
  if $(this).hasClass('active') {
    return $(this).text();
  }
}).get(); // ["2", "3"]

Вы можете заметить, что не каждое значение которая вернула функция добавляется в новый набор. Если она вернула null или undefined, то это значение добавлено не будет.

not

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

Указывать элементы можно с помощью селектора, набора элементов или использовать функцию.

Например, удалим из выборки $('.list>li') элементы с классом disabled:

<ul class="list">
  <li>One</li>
  <li class="disabled">Two</li>
  <li>Three</li>
  <li>Four</li>
  <li class="disabled">Five</li>
</ul>

С помощью селектора

var $li = $('.list>li');
var set1 = $li.not('.disabled'); // One, Three, Four

С помощью набора элементов

var $li = $('.list>li');
var $elements = $('.disabled');
var set2 = $li.not($elements); // One, Three, Four

Посредством функции

var $li = $('.list>li');
var set3 = $li.not(function (index, element) {
  // index - индекс элемента в наборе
  // element - текущий DOM-элемент (обратиться к нему можно также с помощью this)
  return $(element).hasClass('disabled');
}); // One, Three, Four

odd

odd предназначен для уменьшения выборки, оставляет в ней только нечётные элементы (нумерация в наборе осуществляется с 0).

Синтаксис:

.odd()

Пример фильтрации набора с помощью odd:

<ul id="list">
  <li>Zero</li>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

<script>
// получим элементы <li> в #list
var $li = $('#list>li');
// оставим только нечётные
var $odd = $li.odd(); // One, Three
$odd.css('background-color', 'yellow');
</script>

slice

slice предназначен для уменьшения набора до указанного диапазона (от start до end).

Синтаксис slice:

// start – начальный индекс
// end – конечный индекс
.slice(start[, end])

Если конечный индекс end не указать, то в выборке останутся элементы от start до конца набора.

Если отсчёт элемента нужно вести с конца выборки, то используйте в качестве индекса отрицательное число.

Пример использования slice для фильтрации набора:

<ul id="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

<script>
  var $li = $('#list>li');
  // отфильтруем выборку $li с помощью slice
  var $set1 = $li.slice(2); // Three, Four, Five
  var $set2 = $li.slice(-3); // Three, Four, Five
  var $set3 = $li.slice(2, 4); // Three, Four
  var $set4 = $li.slice(-3, 4); // Three, Four
  var $set5 = $li.slice(-2, - 1); // Four
</script>