SiteIS

jQuery - безграничные возможности в дизайне Вашего сайта!

- Один из самых популярных на сегодня среди веб разработчиков фреймворк

- Позволяет быстро и легко создать потрясающие веб-приложения

- Удивительно красивые анимационные эффекты

- Улучшение пользовательского интерфейса

Главная / jQuery шпаргалки / Выборка элементов / Выборка дочернего элемента по индексу

Выборка вложенных тэгов

  • Задача 1:

    - отобрать все элементы span, которые являются потомками блока с классом wrap и обвести их черной однопиксельной рамкой.

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

    • Решение:

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

      Пояснение:

      Для решения задачи с помощью селектора $('div.wrap span') обращаемся ко всем элементам span, расположенным в блоке с классом wrap и с помощью метода css(); добавляем им черную однопиксельную рамку.

      Результат:

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

  • Задача 2:

    - выбрать все элементы span, которые являются потомками элементов div и p - обвести их черной однопиксельной рамкой. Элементам span, потомкам элементов p изменить фоновый цвет на #aeafae

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

    • Решение:

      $(function () {
	$('div span, p span').css('border','1px solid #000000');
	$('p span').css('background','#aeafae');
});

      Пояснение:

      Для решения задачи с помощью селектора $('div span, p span') сначала обратимся к элементам span, потомкам div и p - с помощью метода jQuery .css(); добавим им черную однопиксельную рамку. Затем с помощью селектора $('p span') и метода jQuery .css(); изменим фоновый цвет для элементов span, потомков элементов p

      Результат:

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

  • Задача 3:

    - выбрать все элементы li и обвести их черной однопиксельной рамкой. Элементам li элемента ul с классом pr присвоить фоновый цвет #aeafae

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

    • Решение:

      $(function () {
	$('li', 'ul').css('border','1px solid #000000');
	$( "li", "ul.pr" ).css('background','#aeafae');
});

      Пояснение:

      Для решения задачи использован альтернативный вариант записи, дающий такие же результаты, что и предыдущий пример. Правда в этом случае неполучится обратится сразу к нескольким элементам. С помощью селектора $('li', 'ul') обращаемся ко всем элементам li, потомкам элеметов ul и обводим их черной однопиксельной рамкой. Обратите внимание, что сначала указывается элемент-потомок, а затем элемент-родитель. Оба элемента берутся в кавычки и разделяются запятой. Затем с помощью селектора $( "li", "ul.pr" ) меняем фоновый цвет у элементов li, которые являются потомками элемента ul с классом pr.

      Результат:

      При загрузке страницы, все элементы li будут обведены черной однопиксельной рамкой, а элементам li, принадлежащим элементу ul с классом pr будет добавлен фоновый цвет.

Автор: Super User