Сейчас мы с вами изучим методы jQuery для работы с набором элементов.

Метод .not()

Мы с вами уже разбирали псевдоклассы jQuery, например, :not, который делает отрицание. Кроме этого псевдокласса существует также метод .not(), который осуществляет аналогичную операцию.

Следующие два способа делают одно и тоже - получают все абзацы не с классом .www:

Сделаем это с помощью :not:

$('p:not(.www)');

А теперь то же самое сделаем через .not():

$('p').not('.www');

Хотя первый и второй варианты аналогичны, но не совсем одинаковы. При работе с псевдоклассом мы сразу получаем нужные нам элементы, а при работе с методом мы сначала получим все абзацы, а потом среди них выберем абзацы не с классом .www.

Такую особенность можно и нужно использовать.

В следующем примере мы найдем все абзацы, поставим им в начало текст '!', затем найдем абзацы не с классом .www и поставим им в конец текст '?':

<p class="www">Абзац.</p>
<p class="www">Абзац.</p>
<p>Абзац.</p>
<p>Абзац.</p>
$('p').prepend('!').not('.www').append('?');

HTML код станет выглядеть так:

<p class="www">!Абзац.</p>
<p class="www">!Абзац.</p>
<p>!Абзац.?</p>
<p>!Абзац.?</p>

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

Методы .eq(), .first(), .last()

Аналогично, для псевдоклассов :eq, :first и :last существуют такие же методы .eq(), .first() и .last() (изучите их сами по ссылкам).

Метод .has()

Для псевдокласса :has существует метод .has(), выполняющий аналогичную операцию (изучите его сами по ссылке).

Метод slice

А вот следующий метод - .slice() уже не имеет соответствующего псевдокласса. С помощью этого метода можно можно обратиться к части номеров набора, например, к элементам со второго по пятый.

Давайте разберем работу метода на следующем примере - найдем все абзацы на странице, а затем абзацам с 2-го по 4-тый (включительно) поставим в конец текст '!' (нумерация с нуля, второй абзац будет иметь номер один):

<p>Абзац 0.</p>
<p>Абзац 1.</p>
<p>Абзац 2.</p>
<p>Абзац 3.</p>
<p>Абзац 4.</p>
<p>Абзац 5.</p>
$('p').slice(1, 5).prepend('!');

HTML код станет выглядеть так:

<p>Абзац 0.</p>
<p>Абзац 1.!</p>
<p>Абзац 2.!</p>
<p>Абзац 3.!</p>
<p>Абзац 4.!</p>
<p>Абзац 5.</p>

Обратите внимание на то, что slice(1, 5) первый элемент включает, а второй нет, то есть (1, 5) находит элементы с номером 1, 2, 3, 4, а элементы номер 0 и 5 не берет.

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

С помощью следующего метода .filter() в наборе можно оставить только те элементы, которые удовлетворяют определенному селектору.

Давайте найдем все абзацы, поставим им в начало текст '!' с помощью .prepend(), затем получим из найденных только абзацы с классом .www с помощью .filter() и поставим им в конец текст '?' с помощью .append():

<p>Абзац</p>
<p>Абзац</p>
<p class="www">Абзац</p>
<p class="www">Абзац</p>
$('p').prepend('!').filter('.www').append('?');

HTML код станет выглядеть так:

<p>!Абзац</p>
<p>!Абзац</p>
<p class="www">!Абзац?</p>
<p class="www">!Абзац?</p>

Работа с соседями

С помощью метода .prev() можно обратиться к соседу сверху для определенного элемента, а с помощью .next() - к соседу снизу (учтите, что элементы считаются соседями только внутри одного родителя).

Для примера найдем элемент #test и его соседу сверху поставим текст '!':

<p>Абзац.</p>
<p>Абзац.</p>
<p id="test">Абзац.</p>
<p>Абзац.</p>
<p>Абзац.</p>
$('#test').prev().html('!');

HTML код станет выглядеть так:

<p>Абзац.</p>
<p>!</p>
<p id="test">Абзац.</p>
<p>Абзац.</p>
<p>Абзац.</p>

А теперь выполним аналогичную операцию с соседом снизу:

<p>Абзац.</p>
<p>Абзац.</p>
<p id="test">Абзац.</p>
<p>Абзац.</p>
<p>Абзац.</p>
$('#test').next().html('!');

HTML код станет выглядеть так:

<p>Абзац.</p>
<p>Абзац.</p>
<p id="test">Абзац.</p>
<p>!</p>
<p>Абзац.</p>

Есть и другие методы для работы с соседями: .siblings() .nextAll(), .prevAll(), .nextUntil(), .prevUntil(). Изучите их по ссылкам самостоятельно.

Работа с родителями и потомками

Мы с вами уже немного разбирали метод .parent(), когда обсуждали псевдокласс :parent. Напоминаю: .parent() и :parent делают разные вещи, первый находит родителя элемента, а второй все непустые элементы (являющиеся родителями).

В следующем примере мы найдем элемент #test затем найдем его родителя с помощью .parent() и поставим ему текст '!':

<p>Абзац вне дива.</p>
<div>
	<p>Абзац.</p>
	<p>Абзац.</p>
	<p id="test">Абзац.</p>
	<p>Абзац.</p>
	<p>Абзац.</p>
</div>
<p>Абзац вне дива.</p>
$('#test').parent().html('!');

Результат выполнения кода:

<p>Абзац вне дива.</p>
<div>
	!
</div>
<p>Абзац вне дива.</p>

Есть и другие методы для работы с родителями и потомками: .closest(), .parents(), .parentsUntil(), .children(), .contents(). Изучите их по ссылкам самостоятельно.

Поиск внутри найденного

Давайте теперь разберем метод .find(), который ищет элементы по заданному селектору внутри уже найденных (то есть по потомкам внутри найденных элементов).

Для примера найдем все теги <div>, поставим им в начало текст '!' с помощью .prepend(), затем внутри них найдем все абзацы с помощью метода .find() и поставим им в начало текст '?':

<div>
	<p>Абзац.</p>
	<p>Абзац.</p>
	<p>Абзац.</p>
</div>
<div>
	<p>Абзац.</p>
	<p>Абзац.</p>
	<p>Абзац.</p>
</div>
$('div').prepend('!').find('p').append('?');

HTML код станет выглядеть так:

<div>
	!
	<p>?Абзац.</p>
	<p>?Абзац.</p>
	<p>?Абзац.</p>
</div>
<div>
	!
	<p>?Абзац.</p>
	<p>?Абзац.</p>
	<p>?Абзац.</p>
</div>

Добавление элементов в текущий набор

Иногда бывают ситуации, когда у нас уже есть набор методов, мы выполнили над ним какие-либо операции и теперь хотели бы добавить к этому набору еще элементов и выполнить над этим общим набором еще какие-нибудь операции. Это делается с помощью метода .add().

Давайте найдем все абзацы, поставим им текст '!', затем добавим к найденным абзацам заголовки h2 с помощью .add() и одновременно для заголовков и абзацев поставим красный цвет:

$('p').html('!').add('h2').css('color', 'red');

Существует также похожий метод .andSelf(), который добавляет в текущий набор предыдущий.

Давайте найдем абзац #test, затем найдем родителя этого абзаца с помощью .parent(), добавим найденный абзац к его родителю с помощью .andSelf() и поставим им в начало текст '!' с помощью .prepend(). Получится, что и абзац, и его родитель в начале будут иметь текст '!':

<div>
	<p>Абзац.</p>
	<p id="test">Абзац.</p>
	<p>Абзац.</p>
</div>
$('p').parent().andSelf().prepend('!');

HTML код станет выглядеть так:

<div>
	!
	<p>Абзац.</p>
	<p id="test">!Абзац.</p>
	<p>Абзац.</p>
</div>

Предыдущий набор

Иногда при построении цепочек jQuery есть необходимость вернуться к предыдущему набору. Это делается с помощью метода .end().

В следующем примере мы найдем все абзацы, затем выберем среди найденных абзацы с классом .www с помощью .filter() и им в конец добавим текст '!' с помощью метода .append(), затем вернемся к предыдущему набору (это набор $('p')) с помощью .end() и им в конец добавим текст '?'.

Получится, что у абзацев с классом .www будет текст '!?', а у обычных абзацев - текст '?':

<p class="www">Абзац</p>
<p class="www">Абзац</p>
<p>Абзац</p>
<p>Абзац</p>
$('p').filter('.www').append('!').end().append('?')

HTML код станет выглядеть так:

<p class="www">Абзац!?</p>
<p class="www">Абзац!?</p>
<p>Абзац?</p>
<p>Абзац?</p>

Клонирование элементов

Метод .clone() создает копии выбранных элементов страницы и возвращает их в виде объекта jQuery.

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

<p class="www">абзац</p>
$('.www').clone().insertAfter('.www');

Результат выполнения кода:

<p class="www">абзац</p>
<p class="www">абзац</p>

Проверка наличия

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

Преобразование в массив

Метод .toArray() преобразует набор элементов jQuery в массив DOM элементов JavaScript. Это нужно для того, чтобы к этому массиву можно было применить методы и функции JavaScript, например, отсортировать этот массив с помощью sort или перевернуть его с помощью reverse.

Метод .toArray() преобразует набор элементов jQuery в обычный массив JavaScript.