Выбор всех следующих элементов

Метод: .nextAll();

• Задача 1:

  - обвести красной рамкой (#cc0000) элементы, которые следуют сразу же за элементом span, расположенном в блоке с классом first.

  Показать решение

  • Решение:

    $(function () {
    	$('div.first span').nextAll().css('border', '1px solid #cc0000');
    });
    

    Пояснение:

    - Для решения задачи с помощью селектора $('div.first span') выберем все элементы span, которые являются дочерними элементами блока с классом first. С помощью метода .nextAll() отберем все элементы, расположенные сразу же за span и обведем их красной рамкой. Если за элементом span не следует никаких объектов, то ничего отобрано не будет.

    Результат:

    При загрузке страницы, к которой подключен скрипт, все элементы, которые расположены сразу же за элементами span будут обведены красной рамкой.

• Задача 2:

  - обвести красной рамкой (#cc0000) только div элементы, которые расположены сразу же после элементов span и находятся с ними на одном уровне вложенности.

  Показать решение

  • Решение:

    $(function () {
    	$('span').nextAll('div').css('border', '1px solid #cc0000');
    });
    

    Пояснение:

    - Для решения задачи с помощью селектора $('span') выберем все элементы span на странице. С помощью метода .nextAll('div') находим все элементы div, которые расположены за элементом span и находятся с ним на одном уровне - обводим их красной рамкой. Следует обратить внимание, что блоки div будут отобраны даже, если между элементами span и div на том же уровне вложенности будут находиться еще какие либо элементы.

    Результат:

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