Работа с выборкой в 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>