Работа с выборкой в jQuery

В этой статье рассмотрим методы jQuery для работы с выборкой: get(), each(), index(), add() и not().

Получение DOM-элемента из набора

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

Например, получим второй элемент из набора:

var elements = $('img');
// получим 2 элемент из elements
var secondElem = elements[1];

Отсчёт элементов в выборке jQuery начинается с 0.

Если в выборке нет элемента с указанным индексом, то мы получим undefined:

if (!secondElem) {
  console.log('Элемента с индексом 1 нет в выборке elements');
}

Для перебора набора jQuery как коллекции DOM-элементов можно использовать цикл for:

var elements = $('li');
for (var i = 0, length = elements.length; i < length; i++) {
  var element = elements[i];
  console.log(i + '. ' + element.textContent);
}

Другой способ получить DOM-элемент из набора по его индексу – это использовать метод get().

Например, получим последний элемент из набора elements:

var elements = $('li');
var lastElem = elements.get(elements.length - 1);

Кроме получения DOM-элемента по индексу, с помощью get() можно ещё получить массив всех элементов. Для этого нужно вызвать данный метод без аргументов:

var elements = $('li');
// получим массив всех элементов набора
var arrayElems = elements.get();

Кроме get() аналогичную функциональность предоставляет ещё метод toArray():

var elements = $('li');
// получим все элементы набора в стандартном массиве
var arrayElems = elements.toArray();

Перебор элементов выборки

В jQuery для перебора набора элементов можно воспользоваться специальным методом each():

$('li').each(function(index, element){
  console.log(index + '. ' + element.textContent);
});

Методу each() в качестве аргумента передаётся анонимная функция с 2 параметрами: index (индекс элемента в наборе) и element (текущий элемент).

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

Получение индекса элемента в наборе

Для поиска индекса элемента в наборе, можно воспользоваться методом index(). В качестве аргумента ему следует передать искомый элемент, индекс которого мы хотим определить. Указать искомый элемент можно разными способами: с помощью DOM-элемента или набора jQuery.

Например:

<ul>
  <li id="one">One</li>
  <li id="two">Two</li>
  <li id="three">Three</li>
</ul>

<script>
  var $list = $('li');
  var two = document.querySelector('#two');
  // получим индекс элемента two в $list
  var index = $list.index(two);
</script>

Передача искомого элемента посредством набора jQuery:

var index = $list.index($('#two'));

Если элемент не найден, то index() возвращает -1.

Добавление новых элементов в набор

Добавить новые элементы к текущему набору в jQuery выполняется с помощью метода add().

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

Передать элементы в add() осуществляется через аргумент, который может принимать любые значения как $(). Т.е.: селектор, набор jQuery, ссылки на DOM-элементы и фрагмент HTML.

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

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>
<p class="text">Text</p>
<p class="text">Text</p>

<script>
  // используя селектор .text
  var elements = $('li').add('.text');
</script>

Указание посредством коллекции DOM-элементов:

var elems = document.querySelectorAll('.text');
// используя HTML-коллекцию элементов elems
var elements = $('li').add(elems);

Указание в виде набора jQuery:

// $('.text') – набор элементов, которые добавим к $('li')
var elements = $('li').add($('.text'));

2. Пример использования в add() только что созданного абзаца:

var elements = $('li').add('<p id="new">new paragraph</p>');

В этом коде был создан новый абзац и добавлен в набор. При этом он имеется только в наборе, но не на странице. Чтобы данный элемент отобразился на странице, его необходимо туда добавить (например, в <body>).

Например:

var elements = $('li').add($('<p id="new">new paragraph</p>').appendTo('body'));

Удаление элементов из набора

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

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

Например, удалим из набора элементы с классом active:

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

<script>
// набор элементов
var set = $('li');
// удалим из набора элементы с классом active
var newSet = set.not('.active');
</script>

Получение DOM-элемента из набора

Перебор элементов выборки

Получение индекса элемента в наборе

Добавление новых элементов в набор

Удаление элементов из набора

Комментарии: