Выборка отобранных элементов в заданом диапазоне

Метод: .slice();

Выбирает элементы из отобранного набора в заданном диапазоне. Диапазон задается в параметре метода. Отсчет начинается с 0, если значение положительно, и с 1, если значение отрицательно.

• Задача 1:

  - изменить цвет шрифта на красный (#cc0000) у элементов span порядковый номер которых находится в диапазоне от 2 до 5 включительно.

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

  • Решение:

    $(function () {
    	$('span').slice(1,5).css('color', 'red');
    });
    

    Пояснение:

    - Для решения задачи с помощью селектора $('span') отберем все элементы span на странице. С помощью метода .slice(1,5) находим элементы, которые лежат в требуемом диапазоне (со второго по четвертый включительно). Следует помнить, что при положительном значении параметров фильтра отсчет начинается с 0. Первый параметр является обязательным и элемент с этим индексом будет включен в отобранный набор (в примере - второй по счету элемент). Второй параметр является необязательным и элемент с указанным в нем индексом не будет включен в набор (в примере - последним буден отобран четвертый по счету элемент). Найденным элементам меняем цвет шрифта.

    Результат:

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

• Задача 2:

  - изменить цвет шрифта на красный (#cc0000) у элементов span, начиная с третьего по счету.

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

  • Решение:

    $(function () {
    	$('span').slice(2).css('color', 'red');
    });
    

    Пояснение:

    - Для решения задачи с помощью селектора $('span') отберем все элементы span на странице. С помощью метода .slice(2) меняем цвет шрифта всем найденным элементам, начиная с третьего по счету. Следует помнить, что при положительном значении параметров фильтра отсчет начинается с 0. Первый параметр является обязательным и элемент с этим индексом будет включен в отобранный набор (в примере - третий по счету элемент). Если не указывать второй параметр, то в набор будут включены все оставшиеся элементы span, найденные на странице.

    Результат:

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

• Задача 3:

  - изменить цвет шрифта на красный (#cc0000) у элементов span, начиная со второго по счету от начала и до второго по счету с конца включительно.

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

  • Решение:

    $(function () {
    	$('span').slice(-8,-1).css('color', 'red');
    	//или
    	$('span').slice(1,-1).css('color', 'red');	
    });
    

    Пояснение:

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

    Результат:

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

• Задача 4:

  - изменить цвет шрифта на красный (#cc0000) у трех последних элементов span.

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

  • Решение:

    $(function () {
    	$('span').slice(-3).css('color', 'red');
    });
    

    Пояснение:

    - Для решения задачи с помощью селектора $('span') отберем все элементы span на странице. С помощью метода .slice(-3) меняем цвет шрифта всем найденным элементам, начиная с третьего по счету с конца. Следует помнить, что при отрицательном значении параметров фильтра отсчет начинается с 1. Первый параметр является обязательным и элемент с этим индексом будет включен в отобранный набор (в примере - третий по счету элемент с конца).

    Результат:

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