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

Все абзацы <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>.

Решение:

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

Оберните каждый абзац <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');

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

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