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

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

Все абзацы <p>, внутри которых есть <b>, оберните в тег <div>.

Решение: 

$('p:has(b)').wrap('<div>');

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

Подсказка: используйте метод add и псевдокласс :header.

Решение: 

$('p.www').prepend('!').add(':header').css('color', 'red');

Найдите все абзацы <p>, и замените их на тег <div> с таким же содержимым.

Подсказка:

Первый вариант решения: используйте метод each и метод replaceWith.

Второй вариант решения: используйте метод replaceWith, передав ему параметром функцию, которая применится для всех элементов (то есть replaceWith сработает как each).

Решение:

Первый вариант: 

$('p').each(function() {
	var paragraph = $(this);
	var text = paragraph.html();
	paragraph.replaceWith('<div>' + text + '</div>');
});

Второй вариант: 

$('p').replaceWith(function() {
	return '<div>' + $(this).html() + '</div>';
});

Найдите все чекбоксы на странице и заблокируйте четные из найденных.

Решение: 

$(':checkbox').prop('disabled', true);

Поставьте всем незаблокированным чекбоксам статус "отмечен".

Решение: 

$(':checkbox:not([disabled])').prop('checked', true);

Дан элемент #test. Поставьте его непосредственному соседу сверху текст '!', а соседу снизу - текст '?'. Решите задачу одной цепочкой.

Подсказка:

чтобы сделать одной цепочкой используйте метод end.

Решение: 

$('#test').prev().html('!').end().next().html('?');

Дан элемент #test. Поставьте его непосредственным соседям сверху и снизу текст элемента #test.

Решение: 

var $elem = $('#test');
var text = $elem.html();
$elem.prev().html(text).end().next().html(text);

Дан элемент #test. Найдите среди его соседей сверху ближайший абзац и поставьте ему текст элемента #test.

Решение:

Первый вариант: 

var $elem = $('#test');
var text = $elem.html();
$elem.prevUntil('p').last().prev().html(text);

Как это работает: prevUntil ищет не включительно, то есть найденный абзац не включится в набор, поэтому из набора берется последний элемент с помощью last (он стоит непосредственно перед искомым абзацем) и затем с помощью prev и берется наш абзац (он стоит непосредственно перед последним элементом из найденных через prevUntil).

Однако, в этом варианте есть проблема - абзац стоит непосредственно перед #test - то ничего работать не будет (prevUntil('p') ничего не найдет).

Второй вариант: 

var $elem = $('#test');
var text = $elem.html();
$elem.prevAll('p').first().html(text);

Как это работает: prevAll ищет все абзацы, стоящие перед элементом, затем с помощью first мы выбираем первый из найденных - это и есть искомый абзац.

Найдите второй <li> на странице, добавьте ему класс .www, оберните его внутри тегом <i>, вставьте после него <li> с текстом 'привет'.

Решение: 

$('li:eq(1)').addClass('.www').wrapInner('<i>').after('<li>привет</li>');

Найдите десятый <li> на странице, найдите его родителя, получите непосредственного соседа родителя сверху, оберните его в <div class="www">.

Решение: 

$('li:eq(9)').parent().prev().wrap('<div class="www">');

Каждому абзацу <p>, кроме абзацев с классом .www, добавьте к конец его порядковый номер.

Решение:

Первый вариант через each: 

$('p:not(.www)').each(function (index) {
	$(this).append(index);
});

Второй вариант через append (в конец элемента добавится то, что вернет анонимная функция): 

$('p:not(.www)').append(function (index) {
	return index;
});

Найдите все абзацы <p> и поставьте перед каждым абзацем его копию. Копию покрасьте в красный цвет, а исходный абзац в зеленый.

Решение:

Первый вариант: 

$('p').each(function() {
	var $elem = $(this);
	$elem.before($elem.clone().css('color', 'red')).css('color', 'green');
});

Второй вариант: 

$('p').each(function() {
	var $elem = $(this);
	$elem.clone().css('color', 'red').insertBefore($elem);
	$elem.css('color', 'green');
});

Третий вариант через end: 

$('p').each(function() {
	var $elem = $(this);
	$elem.clone().css('color', 'red').insertBefore($elem).end().end().css('color', 'green');
});

Четвертый вариант: 

$('p').css('color', function() {
	var $elem = $(this);
	$elem.clone().css('color', 'red').insertBefore($elem);
	return 'green';
});

Пятый вариант (продолжаем цепочку после each): 

$('p').each(function() {
	var $elem = $(this);
	$elem.clone().css('color', 'red').insertBefore($elem);
}).css('color', 'green');

Шестой вариант: 

$('p').before(function() {
	return $(this).clone().css('color', 'red');
}).css('color', 'green');

Найдите абзацы <p>, которые стоят непосредственно под <h2> и переместите каждый абзац так, чтобы он стал непосредственно над <h2>.

Решение:

Первый вариант (здесь before физически перемещает переданный ему элемент): 

$('h2 + p').each(function() {
	var $elem = $(this);
	$elem.prev().before($elem);
});

Второй вариант: 

$('h2 + p').each(function() {
	var $elem = $(this);
	$elem.insertBefore($elem.prev());
});

Третий вариант: 

$('h2 + p').prev().before(function() {
	return $(this).next();
});

Как он работает: $('h2 + p') находит абзац под h2, $('h2 + p').prev() обращается к h2, под которым есть абзац, $('h2 + p').prev().before() вызывает функцию before для каждого h2. То, что вернет эта функция - и вставится перед h2. Функция возвращает $(this).next(), где $(this) - это собственно h2, а $(this).next() - это абзац под h2. И абзац физически перемещается перед h2.

Найдите все пустые абзацы <p> (без текста) и вставьте в них текст непосредственного соседа сверху.

Решение:

Первый вариант: 

$('p:empty').each(function() {
	var $elem = $(this);
	var text = $elem.prev().html();
	$elem.html(text);
});

Второй вариант: 

$('p:empty').html(function() {
	return $(this).prev().html();
});

Родителю тега <b>, если это элемент с классом .www или абзац <p>, поставьте красный цвет и размер текста в 30px.

Решение:

Первый вариант (в лоб через if): 

$('b').each(function() {
	var $parent = $(this).parent();
	if ($parent.is('.www') || $parent.is('p')) {
		$parent.css({color: 'red', fontSize: '30px'});
	}
});

Второй вариант (убрали if): 

$('b').each(function() {
	$(this).parent('.www, p').css({color: 'red', fontSize: '30px'});
});

Третий вариант (собственно, цикл-то тут и не нужен): 

$('b').parent('.www, p').css({color: 'red', fontSize: '30px'});

Всем пустым абзацам <p> поставьте текст ближайшего к ним сверху тега <h2>.

Решение:

Первый вариант (ищем все h2 через prevAll, берем первый через first): 

$('p:empty').each(function() {
	$(this).html($(this).prevAll('h2').first().html());
});

Второй вариант (можно без first, потому что если метод html применяется к группе элементов, то вернет текст первого из них, что собственно нам и нужно): 

$('p:empty').each(function() {
	$(this).html($(this).prevAll('h2').html());
});

Третий вариант: 

$('p:empty').html(function() {
	return $(this).prevAll('h2').html();
});

Даны инпуты с числами. Сделайте так, чтобы в инпутах стали квадраты этих чисел.

Подсказка: используйте метод val для получения значения атрибута value.

Решение:

Первый вариант: 

$('input').each(function() {
	var $elem = $(this);
	var value = $elem.val();
	$elem.val(value * value);
});

Второй вариант: 

$('input').val(function (index, value) {
	return value * value;
});

Дан элемент #test. Поставьте ему в начало текст непосредственного соседа сверху, а в конец - текст непосредственного соседа снизу.

Решение: 

var $elem = $('#test');
var textPrev = $elem.prev().html();
var textNext = $elem.next().html();
$elem.prepend(textPrev);
$elem.append(textNext);

Дан элемент #test. Найдите его второго соседа сверху и его второго соседа снизу. Сделайте так, чтобы найденные элементы обменялись текстом (сосед сверху возьмет текст соседа снизу и наоборот).

Решение: 

var $id = $('#test');
var $next = $id.nextAll().eq(1);
var $prev = $id.prevAll().eq(1);
var nextText = $next.html();
var prevText = $prev.html();
$next.html(prevText);
$prev.html(nextText);

Дан элемент <div>. Выберите из него всех непосредственных потомков, которые не являются заголовками и покрасьте их в красный цвет.

Решение:

Первый вариант (в стиле CSS, если не понятно, см. этот и этот этот уроки из учебника CSS): 

$('div > *:not(h2)').css('color', 'red');

Второй вариант (в стиле jQuery): 

$('div').children().not('h2').css('color', 'red');

Третий вариант: 

$('div').children(':not(h2)').css('color', 'red');

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

Подсказка: используйте метод filter.

Решение: 

$('p').css('color', 'red').filter('.www').html('!');

Найдите все абзацы <p> с классом .www, покрасьте их в красный цвет. Затем выберите среди найденных абзацев первый и поставьте ему текст '!', затем выберите последний и ему поставьте текст '?'. Решите задачу одной цепочкой.

Подсказка: для того, чтобы была одна цепочка, используйте метод end.

Решение: 

$('p.www').css('color', 'red').first().html('!').end().last().html('?');

Найдите все абзацы <p>, поставьте каждому из них в конец тот же текст, который стоит внутри него (то есть текст в абзаце станет написан два раза).

Решение:

Первый вариант: 

$('p').each(function() {
	var $elem = $(this);
	var text = $elem.html();
	$elem.append(text);
});

Второй вариант: 

$('p').append(function (index, text) {
	return text;
})

Найдите все абзацы <p>, поставьте каждому из них в конец его порядковый номер в наборе.

Решение:

Первый вариант: 

$('p').each(function() {
	var $elem = $(this);
	var index = $elem.index();
	$elem.append(index);
});

Второй вариант: 

$('p').append(function (index) {
	return index;
});

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

Решение:

Первый вариант: 

$('p').each(function() {var $elem = $(this);var index = $(this).index();var text = $(this).html();$elem.append(index * text);});

Второй вариант: 

$('p').append(function (index, text) {
	return index * text;
});

По нажатию на абзац <p> удалите его непосредственных соседей сверху и с низу.

Решение: 

$('p').on('click', function() {
        	$(this).prev().remove().end().next().remove();
    });

По нажатию на абзац <p> удалите всех его соседей сверху до первого заголовка h1-h6 (то есть элементы, стоящие выше этого заголовка и сам заголовок удалять не надо).

Решение: 

$('p').on('click', function() {
        	$('p').prevUntil(':header').remove();
    });

По нажатию на абзац <p> удалите его ближайшего нижнего соседа с классом .www.

Решение: 

$('p').on('click', function() {
        	$(this).nextAll('.www').first().remove();
    });

По нажатию на абзац <p> удалите его пятого соседа снизу.

Решение: 

$('p').on('click', function() {
        	$(this).nextAll().eq(4).remove();
    });

По нажатию на абзац <p> удалите его пятого соседа снизу, если это не <h2>.

Решение: 

$('p').on('click', function() {
        	$(this).nextAll().eq(4).not('h2').remove();
    });

По нажатию на абзац <p> удалите его пятого соседа снизу, если этот сосед не имеет внутри себя тега <b>.

Решение: 

$('p').on('click', function() {
        	$(this).nextAll().eq(4).not(':has(b)').remove();
    });

По нажатию на абзац <p> удалите его пятого соседа снизу, если этот сосед не стоит непосредственно после <h2>.

Решение: 

$('p').on('click', function() {
        	 $(this).nextAll().eq(3).not('h2').next().remove();
    });

Как это работает: eq(3) получает четвертый элемент (удалять будем пятый), затем not('h2') проверяет, что четвертый элемент не h2, если это так - удаляем следующий за четвертым элементом.

Дан элемент #test. Поменяйте этот элемент местами с его непосредственным соседом снизу.

Решение: 

var $elem = $('#test');
$elem.insertAfter($elem.next());

Как это работает: insertAfter физически перемещает указанный элемент.

Дан элемент #test. После его непосредственного соседа снизу вставьте копию нашего элемента.

Решение: 

var $elem = $('#test');$elem.clone().insertAfter($elem.next());

Дан элемент #test. Поменяйте этот элемент местами с его ближайшим соседом снизу с классом .www.

Решение: 

var $elem = $('#test');
var $neighbor = $elem.nextAll('.www').first(); //neighbor - это сосед
$elem.clone().insertAfter($neighbor);
$neighbor.insertAfter($elem);
$elem.remove();

Проще решения не нашел. Кто найдет - скиньте)

Найдите все абзацы <p>, которые внутри одного родителя лежат между одним и другим <h2>.

Решение: 

$('h2').nextUntil('h2').next().prevUntil('h2').filter('p').css('color', 'red');

Оберните каждый абзац <p> снаружи и внутри в <div>.

Решение: 

$('p').wrap('<div>').wrapInner('<div>');

Найдите все абзацы <p>, у которых непосредственный родитель не <div> и оберните каждый из них в <div class="www">.

Решение:

Первый вариант: 

$('p').parent().not('div').children('p').wrap('<div class="www">');

Второй вариант (в стиле CSS): 

$(':not(div) > p').wrap('<div class="www">');

Найдите все абзацы <p>. Удалите их родителя (сделайте ему unwrap), если этот родитель не <div> с классом .www. Затем для те абзацы, у которых был удален родитель, оберните в <div> с классом .zzz.

Решение: 

$(':not(div.www) > p').unwrap().wrap('<div class="zzz">');

Найдите всех родителей элемента #test и создайте массив из CSS классов этих родителей.

Решение: 

var arr = [];
$('#test').parents().each( function() {
	var classes = $(this).attr('class');
	if (classes) {
		arr = arr.concat(classes.split(' '));
	}
});

console.log(arr);

Найдите все абзацы <p>, у которых есть атрибут class, и каждый из них оберните в <div> с теми же классами, как у найденного абзаца, а классы каждого абзаца удалите вместе с атрибутом class.

Решение:

Первый вариант (p[class] находит абзацы, у которых есть атрибут class): 

$('p[class]').each(function() {
	$elem = $(this);
	var classes = $elem.attr('class');
	var $div = $('<div>').addClass(classes);
	$elem.removeAttr('class').wrap($div);
});

Второй вариант: 

$('p[class]').attr('class', function (index, classes) {
	var $div = $('<div>').addClass(classes);
	$(this).removeAttr('class').wrap($div);
});

Третий вариант: 

$('p[class]').attr('class', function (index, classes) {
	$(this).removeAttr('class').wrap('<div class="'+classes+'">');
});

Найдите все абзацы <p> из #test, поставьте им в конец текст '!', затем исключите из найденных абзацы с классом .www и оставшимся поставьте красный цвет.

Решение: 

$('#test').children('p').append('!').not('.www').css('color', 'red');

Найдите все <li> на странице, затем перед предпоследним из найденных вставьте еще один <li> с текстом 'пункт'.

Решение: 

$('li').last().prev().before('
  • пункт
    • ');

    Найдите все <li> на странице, затем выберите среди найденных второй, третий и четвертый с конца и поставьте им текст '!'.

    Решение: 

    $('li').slice(-4, -1).html('!');

    Найдите <ol> с #test и переставьте все <li> в нем в обратном порядке.

    Подсказка: используйте метод get, а затем метод JavaScript reverse.

    Решение: 

    var $ol = $('#test');
$ol.html( $ol.children().get().reverse() );

    Дан элемент #text. Найдите всех его соседей сверху и всех его соседей снизу и поменяйте их местами (то есть все, что стоит до элемента, должно стать после него и наоборот).

    Решение: 

    $text = $('#text');
$prev = $text.prevAll().get().reverse();
$next = $text.nextAll();
$text.after($prev).before($next);

    Получите все <li> с классом .www, сделайте им красный цвет, затем найдите среди найденных те <li>, у которых есть класс .bbb и удалите их. Решите все одной цепочкой.

    Решение: 

    $('li.www').css('color', 'red').filter('.bbb').remove();

    Получите все <li> на странице. Четные из полученных сделайте пустыми, а нечетные удалите.

    Решение:

    Первый вариант: 

    var $elems = $('li');
$elems.detach(':odd');
$elems.empty(':even');

    Второй вариант (можно обойтись одной цепочкой): 

    $('li').detach(':odd').empty(':even');

    Найдите все теги <div> и удвойте им высоту.

    Решение:

    Первый вариант: 

    $('div').each(function() {
	var $elem = $(this);
	var height = $elem.height();
	$elem.height(height*2);
});

    Второй вариант: 

    $('div').height(function (index, height) {
	return height*2;
});

    Найдите сумму высот всех <div> на странице.

    Решение: 

    var sum = 0;
$('div').height(function (index, value) {
	sum +=value;
});

console.log(sum);

    Для элемента #test найдите ближайшего родителя с классом .www, в конец этого родителя добавьте абзац с текстом '!'.

    Подсказка: используйте метод parentsUntil.

    Решение: 

    $('#test').parentsUntil('.www').append('<p>!</p>');

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

    Решение: 

    $('#test').click(function() {$(this).parentsUntil('.www').find('p').css('color', 'red');});

    Покрасьте первые 10 <li> на странице в красный цвет.

    Решение: 

    $('li').slice(0, 10).css('color', 'red');

    Покрасьте с 5-той по 10-ю <li> на странице в красный цвет.

    Решение: 

    $('li').slice(4, 10).css('color', 'red');

    Найдите последние 10 <li> на странице, покрасьте их в красный цвет. Затем из найденных найдите четные <li> и оберните их внутри в тег <b>.

    Решение: 

    $('li').slice(-10).css('color', 'red').filter(':even').wrapInner('<b>');

    На странице даны чекбоксы. Подсчитайте, сколько из них отмечены.

    Решение: 

    console.log( $(':checkbox:checked').length );

    Дано 5 чекбоксов. Сделайте так, чтобы после того, как пользователь отметил два из них, все чекбоксы заблокировались.

    Решение: 

    var $checkboxes = $(':checkbox');
$checkboxes.on('click', function() {
	if ($(':checkbox:checked').length == 2) {
		$checkboxes.attr('disabled', 'true');
	}
});

    Сделайте так, чтобы все отмеченные чекбоксы сменили свое состояние на неотмеченное и наоборот.

    Решение:

    Первый вариант: 

    $(':checkbox').each(function() {
	$elem = $(this);
	$elem.prop('checked', !$elem.prop('checked'));
});

    Второй вариант (с примесями чистого js проще): 

    $(':checkbox').each(function (index, elem) {
	elem.checked = !elem.checked;
});

    Дан инпуты. Переместите содержимое атрибута value в атрибут placeholder, а сам атрибут value удалите совсем.

    Решение: 

    $('input').each(function() {
	$elem = $(this);
	$elem.attr('placeholder', $elem.val()).removeAttr('value');
});

    Дана ссылка. Если атрибут href начинается на http://, добавьте ссылке атрибут target="_blank".

    Решение: 

    $("a[href^='http://']").attr('target', '_blank');

    Дан инпут, в который можно ввести число. Сделайте так, чтобы при вводе числа в этот инпут и потери фокуса на странице искался чекбокс с таким номером и становился отмеченным, а остальные чекбоксы становились неотмеченными.

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