SiteIS

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

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

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

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

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

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

Выборка по фрагменту текста

  • Задача 1:

    - выбрать все элементы списка li, в которых встречается слово "элемент" и изменить цвет шрифта этих элементов на #00cc00.

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

    • Решение:

      $(function () {
	$("li:contains('элемент')").css('color', '#00cc00');
});

      Пояснение:

      Для решения задачи с помощью фильтра :contains() обращаемся к элементу списка li. В качестве параметра в фильтре указываем искомый фрагмент. Элементам, содержащим нужный параметр меняем цвет шрифта с помощью метода css(). Важно помнить, что для работы с русскими символами все файлы (html, js) должны быть в кодировке UTF-8. Фрагменты текста "элемент" и "Элемент" для скрипта являются разными. Обратите внимание, что в примере селектор окружен двойными кавычками в то время, как параметр фильтра взят в одинарные кавычки.

      Результат:

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

  • Задача 2:

    - обвести красной однопиксельной рамкой элементы div и span у которых присутствует фрагмент текста текст.

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

    • Решение:

      $(function () {
	$('div:contains("текст"), span:contains("текст")').css('border', '1px solid #cc0000');
});

      Пояснение:

      Для решения задачи с помощью фильтра :contains() обращаемся к элементам div и span. В качестве параметра в фильтре указываем искомый фрагмент. Элементам, содержащим нужный параметр добавляем однопиксельную рамку красного цвета. Важно помнить, что для работы с русскими символами все файлы (html, js) должны быть в кодировке UTF-8. Фрагменты текста "текст" и "Текст" для скрипта являются разными. Обратите внимание, что в примере селектор окружен одинарными кавычками в то время, как параметр фильтра взят в двойные кавычки.

      Результат:

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

  • Задача 3:

    - обвести красной однопиксельной рамкой элементы списка li у которых присутствует фрагмент текста Пункт 1.

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

    • Решение:

      $(function () {
	$('li:contains("Пункт 1")').css('border', '1px solid #cc0000');
});

      Пояснение:

      Для решения задачи с помощью фильтра :contains() обращаемся к элементам списка li. В качестве параметра в фильтре указываем искомый фрагмент. Элементам, содержащим нужный параметр добавляем однопиксельную рамку красного цвета. Важно помнить, что если в списке присутствуют элементы, в которых содержатся фрагменты текста Пункт 11 Пункт 12 и т.д., то они тоже будут обведены рамкой.

      Результат:

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

Автор: Super User