Задачи для решения
Все абзацы <p>, внутри которых есть <b>, оберните в тег <div>.
Решение:
$('p:has(b)').wrap('<div>');
Найдите все абзацы <p> с классом .www, поставьте им в начало текст '!', затем добавьте к этим абзацам еще и заголовки h1-h6 и покрасьте эти абзацы и заголовки в красный цвет.
Решение:
$('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, добавьте к конец его порядковый номер.
Найдите все абзацы <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>. Выберите из него всех непосредственных потомков, которые не являются заголовками и покрасьте их в красный цвет.
Найдите все абзацы <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> в нем в обратном порядке.
Решение:
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');
Дан инпут, в который можно ввести число. Сделайте так, чтобы при вводе числа в этот инпут и потери фокуса на странице искался чекбокс с таким номером и становился отмеченным, а остальные чекбоксы становились неотмеченными.
Дан селект и радио кнопочки, количество радио равно количеству пунктов в селекте. Сделайте так, чтобы при выборе пункта в селекте автоматически становилась отмеченной соответствующая радио кнопочка (соответствие по номеру следования: первый пункт списка - первому радио и так далее).