Задачи для решения
Задачи на работу с набором
Найдите все <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');
Задачи на соседей
Найдите первый элемент, который стоит непосредственно за элементом с классом 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)');
Задачи на родителей
Найдите родителя элемента с классом test.
Решение:
$('.test').parent();
Найдите родителей всех тегов <b> и сделайте их красным цветом.
Решение:
$('b').parent().css('color','red');
Найдите ближайших дивов-родителей всех тегов <b> и сделайте их красным цветом.
Решение:
$('b').closest('div').css('color', 'red')
Задачи на 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
Найдите все <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>');
}
});