Фильтрация выбранных элементов в jQuery

В этой статье рассмотрим методы 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>

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

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

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

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

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

В функции:

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

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

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

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

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

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

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

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>

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

var $list = $('#list>li');

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

2. С использованием функции. Метод 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;
  }
});

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

var $list = $('#list>li');

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

4. С использованием 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>

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

var $li = $('.list>li');

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

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

var $li = $('.list>li');

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

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

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>