Перед решением задач изучите теорию к данному уроку.

Задачи для решения

Задачи на работу с набором

Для решения задач данного блока вам понадобятся следующие методы: not, eq, first, last, slice, filter.

Найдите все <li>, исключив из набора <li> с классом test.

Решение: 

$('li').not('.test');

Найдите первый <li> в наборе.

Решение: 

$('li').first();

Найдите последний <li> в наборе.

Решение: 

$('li').last();

Найдите пятый <li> в наборе.

Решение: 

$('li').eq(4);

Найдите предпоследний <li> в наборе.

Решение: 

$('li').eq(-2);

Найдите с 3-го по 10-тый <li> в наборе.

Решение: 

$('li').slice(2, 10);

Найдите все <li> затем с помощью filter выберите все li с классом .www.

Решение: 

$('li').filter('.www');

Задачи на соседей

Для решения задач данного блока вам понадобятся следующие методы: not, next, prev, nextAll, prevAll, nextUntil, prevUntil, siblings.

Найдите первый элемент, который стоит непосредственно за элементом с классом test.

Решение: 

$('.test').next();

Найдите первый элемент, который стоит непосредственно перед элементом с классом test.

Решение: 

$('.test').prev();

Найдите все элементы, которые идут непосредственно за элементом с классом test.

Решение: 

$('.test').nextAll();

Найдите все элементы, которые идут непосредственно перед элементом с классом test.

Решение: 

$('.test').prevAll();

Найдите все элементы, которые лежат между элементом с классом www и элементом с классом test через nextUntil.

Решение: 

$('.www').nextUntil('.test');

Найдите все элементы, которые лежат между элементом с классом test и элементом с классом www через prevUntil.

Решение: 

$('.test').prevUntil('.www');

Найдите всех соседей <li> с классом www.

Решение: 

$('li.www').siblings();

Найдите всех соседей <li> с классом www, которые (соседи) имеют класс test.

Решение: 

$('li.www').siblings('.test');

Найдите всех соседей <li> с классом www, но не соседа с классом test.

Решение: 

$('li.www').siblings(':not(.test)');

Задачи на родителей

Для решения задач данного блока вам понадобятся следующие методы: parent, parents, parentsUntil, closest, children, .contents().

Найдите родителя элемента с классом test.

Решение: 

$('.test').parent();

Найдите родителей всех тегов <b> и сделайте их красным цветом.

Решение: 

$('b').parent().css('color','red');

Найдите ближайших дивов-родителей всех тегов <b> и сделайте их красным цветом.

Решение: 

$('b').closest('div').css('color', 'red')

Задачи на find, add, andSelf, end

Для решения задач данного блока вам понадобятся следующие методы: find, add, andSelf, end.

Найдите все <h2> с классом .www, сделайте их красного цвета, затем среди найденных элементов найдите элементы с классом .test и поставьте им размер шрифта в 30px.

Решение: 

$('h2.www').css('color', 'red').find('.test').css('fontSize', '30px');

Найдите все элементы с классом .www, сделайте их красного цвета, затем среди найденных элементов найдите абзацы и поставьте им в конец текст '!'.

Решение: 

$('.www').css('color', 'red').find('p').append('!');

Найдите все абзацы <p> с классом .www, поставьте им в начало текст '!', а в конец текст '!!', затем добавьте к этим абзацам еще и заголовки <h2> и покрасьте эти абзацы и заголовки в красный цвет.

Решение: 

$('p.www').prepend('!').append('!!').add('h2').css('color','red');

Задачи на is

Для решения задач данного блока вам понадобятся следующие методы: is.

Найдите все <h2>, проверьте, что среди найденных есть <h2> с классом test.

Решение: 

$('h2').is('h2.test');

Найдите все элементы непосредственно стоящие после заголовков. Если найденный элемент - абзац, добавьте ему в конец содержимое заголовка над ним.

Решение: 

$(':header').nextAll().each(function (){
	if ($(this).is('p')) {
	$(this).append($(':header').html());
	}
});

Найдите все элементы непосредственно стоящие после заголовков. Если найденный элемент - не абзац, вставьте под заголовком абзац с таким же содержимым, как и заголовок.

Решение: 

$(':header').nextAll().each(function (){
	if (!$(this).is('p')) {
		$(':header').after('<p>'+$(':header').html()+'</p>');
	}
});