Поиск на странице

.find()

Описание: Поиск потомков внутри каждого элемента в текущем наборе соотвествующих элементов с фильтрацией по селектору, объекту jQuery или элементу.

Добавлен в версии: 1.0 .find( selector )

Добавлен в версии: 1.6 .find( element )

Учитывая что объект jQuery представляет из себя набор DOM элементов, метод .find() разрешает нам находить потомки элементов в DOM дереве и конструировать новый объект jQuery из найденных элементов. Методы .find() и .children() похожи, за исключением того, что последний проходит вниз по DOM дереву только на один уровень.

Первая сигнатура метода .find() принимает выражение селектора того же типа что и функция $() . Элементы будут фильтроваться путем проверки — соответстует ли данный элементы селектору.

Рассмотрим страницу на которой расположены вложенные списки:

ul class="level-1">
 li class="item-i">I li>
 li class="item-ii">II
 ul class="level-2">
 li class="item-a">A li>
 li class="item-b">B
 ul class="level-3">
 li class="item-1">1 li>
 li class="item-2">2 li>
 li class="item-3">3 li>
 ul>
 li>
 li class="item-c">C li>
 ul>
 li>
 li class="item-iii">III li>
 ul>

Если мы начнем с пункта II, мы можем найти элементы списка внутри него:

$( "li.item-ii" ).find( "li" ).css( "background-color", "red" );

Результатом работы этого кода станет красный фон для элементов A, B, 1, 2, 3 и C. Даже если элемент II соответствует выражению селектора, он не включается в результаты, так как только потомки считаются кандидатами на соответствие.

В отличие от большинства методов обхода, метод .find() требует обязательного выражения селектора. Если нам нужны все потомки, то мы можем указать универсальный селектор ‘*’ для этого.

Контекст селектора реализованн в методе .find() , следовательно, $( «li.item-ii» ).find( «li» ) эквивалентно $( «li», «li.item-ii» ) .

Начиная с jQuery 1.6, вы также можете фильтровать выбор при помощи переданного объекта jQuery или элемента. С тем же списком описанным выше, если мы начнем с:

И затем передадим этот jQuery объект в find:

$( "li.item-ii" ).find( allListElements );

То это вернет jQuery коллекцию, которая содержит который содержит только элементы списка, являющиеся потомками элемента II.

Аналогично, фильтровать можно по элементу:

var item1 = $( "li.item-1" )[ 0 ];
$( "li.item-ii" ).find( item1 ).css( "background-color", "red" );

Результатом этого вызова будет красный фон у элемента 1.

• Ajax
  • Глобальные Ajax события
  • Вспомогательные методы
  • Низкоуровневый интерфейс
  • Сокращенные методы
  • Базовые
  • Пользовательские
  • Затухание
  • Скольжение
  • События браузера
  • Загрузка документа
  • Прикрепление обработчиков
  • Объект событие
  • События формы
  • События клавиатуры
  • События мыши
  • Class атрибут
  • Копирование
  • DOM Вставка вокруг
  • DOM Вставка внутрь
  • DOM Вставка вне
  • DOM Удаление
  • DOM Замена
  • Общие аттрибуты
  • Свойства стилей
  • Манипуляция коллекциями
  • Хранилище данных
  • DOM методы элементов
  • Методы установки
  • Экземпляр объекта jQuery
  • Глобальный объект jQuery
  • Атрибут
  • Базовые
  • Базовые фильтры
  • Фильтры потомков
  • Фильтры содержимого
  • Форма
  • Иерархия
  • jQuery расширение
  • Фильтр видимости
  • Фильтрация
  • Обход
  • Обход элементов
  • Версия 1.3
  • Версия 1.7
  • Версия 1.8
  • Версия 1.9
  • Версия 1.10
  • Версия 3.0

  Русская документация по jQuery.
  При использовании любых материалов с сайта ссылка на сайт обязательна.

  Источник

  Поиск по странице с помощью jQuery

  Многие посетители сайтов не знают о поиске по странице по нажатию Ctrl+F и ищут необходимый фрагмент глазами, просто пролистывая текст. Этот способ становится проблематичным, если на странице текста больше, чем три-четыре экрана. Для таких посетителей я решил реализовать поиск по странице с использованием jQuery.
  Пример подобного поиска есть на сайте Конституции РФ, но там он работает как-то странно.

  Предупреждение

  Я не профессиональный программист, просьба не пинать за кривой код и возможное изобретение велосипеда.

  HTML-форма

  Первым делом разместим на странице HTML-код формы поиска. Форма включает два элемента — поле для ввода текста и DIV для вывода результатов поиска.

  CSS

  Настройка поиска

   var minlen = 3; // минимальная длина слова var paddingtop = 30; // отступ сверху при прокрутке var scrollspeed = 200; // время прокрутки var keyint = 1000; // интервал между нажатиями клавиш

  Подсветка фрагментов

  Базовая функциональность — подсветка фрагментов в тексте. Делается это с помощью регулярных выражений.

  function dosearch() < term = jQuery('#spterm').val(); jQuery('span.highlight').each(function()< //удаляем старую подсветку jQuery(this).after(jQuery(this).html()).remove(); >); var t = ''; jQuery('div.entry-content').each(function()< // в селекторе задаем область поиска jQuery(this).html(jQuery(this).html().replace(new RegExp(term, 'ig'), '$&')); // выделяем найденные фрагменты n = jQuery('span.highlight').length; // количество найденных фрагментов console.log('n = '+n); if (n==0) jQuery('#spresult').html('Ничего не найдено'); else jQuery('#spresult').html('Результатов: '+n); >); > jQuery('#spterm').keyup(function()< if (jQuery('#spterm').val()!=term) // проверяем, изменилась ли строка if (jQuery('#spterm').val().length>=minlen) < // проверяем длину строки dosearch(); // если все в порядке, приступаем к поиску >else jQuery('#spresult').html(' '); // если строка короткая, убираем текст из DIVа с результатом >);

  Переход между фрагментами

  Мало просто выделить фрагменты, гораздо удобнее организовать быстрый переход между ними. Под формой размещаем ссылку перехода на первый найденный фрагмент. Чтобы не занимать место стрелками, клик на каждый фрагмент ведет к следующему. Клик на последний фрагмент возвращает пользователя к форме поиска.

   if (n==0) jQuery('#spresult').html('Ничего не найдено'); else jQuery('#spresult').html('Результатов: '+n); if (n>1) // если больше одного фрагмента, то добавляем переход между ними < var i = 0; jQuery('span.highlight').each(function(i)< jQuery(this).attr('n', i++); // нумеруем фрагменты, более простого способа искать следующий элемент не нашел >); jQuery('span.highlight').not(':last').attr().click(function()< // всем фрагментам, кроме последнего, добавляем подсказку jQuery('body,html').animate(, scrollspeed); // переход к следующему фрагменту >); jQuery('span.highlight:last').attr().click(function()< jQuery('body,html').animate(, scrollspeed); // переход к форме поиска >); >

  Задержка запуска поиска

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

   jQuery('#spterm').keyup(function()< var d1 = new Date(); time_keyup = d1.getTime(); if (jQuery('#spterm').val()!=term) // проверяем, изменилась ли строка if (jQuery('#spterm').val().length>=minlen) < // проверяем длину строки setTimeout(function()< // ждем следующего нажатия var d2 = new Date(); time_search = d2.getTime(); if (time_search-time_keyup>=keyint) // проверяем интервал между нажатиями dosearch(); // если все в порядке, приступаем к поиску >, keyint); > else jQuery('#spresult').html(' '); // если строка короткая, убираем текст из DIVа с результатом >); 

  Бонус

   if (window.location.hash!="") // бонус < var t = window.location.hash.substr(1, 50); // вырезаем текст jQuery('#spterm').val(t).keyup(); // вставляем его в форму поиска jQuery('#spgo').click(); // переходим к первому фрагменту >

  jQuery(document).ready(function()< var minlen = 3; // минимальная длина слова var paddingtop = 30; // отступ сверху при прокрутке var scrollspeed = 200; // время прокрутки var keyint = 1000; // интервал между нажатиями клавиш var term = ''; var n = 0; var time_keyup = 0; var time_search = 0; jQuery('body').delegate('#spgo', 'click', function()< jQuery('body,html').animate(, scrollspeed); // переход к первому фрагменту >); function dosearch() < term = jQuery('#spterm').val(); jQuery('span.highlight').each(function()< //удаляем старую подсветку jQuery(this).after(jQuery(this).html()).remove(); >); var t = ''; jQuery('div#content').each(function()< // в селекторе задаем область поиска jQuery(this).html(jQuery(this).html().replace(new RegExp(term, 'ig'), '$&')); // выделяем найденные фрагменты n = jQuery('span.highlight').length; // количество найденных фрагментов console.log('n = '+n); if (n==0) jQuery('#spresult').html('Ничего не найдено'); else jQuery('#spresult').html('Результатов: '+n+'. Перейти'); if (n>1) // если больше одного фрагмента, то добавляем переход между ними < var i = 0; jQuery('span.highlight').each(function(i)< jQuery(this).attr('n', i++); // нумеруем фрагменты, более простого способа искать следующий элемент не нашел >); jQuery('span.highlight').not(':last').attr().click(function()< // всем фрагментам, кроме последнего, добавляем подсказку jQuery('body,html').animate(, scrollspeed); // переход к следующему фрагменту >); jQuery('span.highlight:last').attr().click(function()< jQuery('body,html').animate(, scrollspeed); // переход к форме поиска >); > >); > jQuery('#spterm').keyup(function()< var d1 = new Date(); time_keyup = d1.getTime(); if (jQuery('#spterm').val()!=term) // проверяем, изменилась ли строка if (jQuery('#spterm').val().length>=minlen) < // проверяем длину строки setTimeout(function()< // ждем следующего нажатия var d2 = new Date(); time_search = d2.getTime(); if (time_search-time_keyup>=keyint) // проверяем интервал между нажатиями dosearch(); // если все в порядке, приступаем к поиску >, keyint); > else jQuery('#spresult').html(' '); // если строка короткая, убираем текст из DIVа с результатом >); if (window.location.hash!="") // бонус < var t = window.location.hash.substr(1, 50); // вырезаем текст jQuery('#spterm').val(t).keyup(); // вставляем его в форму поиска jQuery('#spgo').click(); // переходим к первому фрагменту >>);

  Недостатки

  На больших страницах (примерно 60 кб текста) скрипт зависает на пару минут.

  Спасибо за внимание, буду благодарен за замечания и идеи по улучшению работы скрипта.

  Источник

  Проект: собственный поиск по странице на jQuery

  Недавно мы говорили о библиотеках и фреймворках — и обещали, что попробуем что-нибудь на них собрать. Настало время.

  Сегодня мы возьмём популярную библиотеку jQuery и сделаем на её основе поиск по странице. Браузеры это умеют делать встроенными инструментами, но с помощью нашего метода можно будет более тонко всё настроить и сделать поле поиска видимым и удобным.

  • библиотека jQuery — она обеспечит работу нашего поискового плагина, потому что плагин сделан тоже для jQuery.
  • плагин highlight — поможет нам найти нужные слова в тексте и подсветить их приятным цветом (каким захотим)
  • поле ввода и кнопка — отвечают за сам интерфейс поиска.

  Общая идея

  У нас есть сайт с неким текстом, и нам нужно быстро находить в нём нужные слова или части слов. Для этого мы в самом начале страницы делаем поле ввода, куда будем писать наши слова для поиска, и кнопку, которая этот поиск запускает.

  Дальше скрипт берёт весь текст, находит в нём нужные фрагменты и подсвечивает их. Если он ничего не находит — пишет сообщение о том, что таких слов в тексте нет.

  Готовим каркас

  Сделаем как обычно — возьмём наш стандартный шаблон из предыдущих задач и немного поправим описания разделов. Сохраним его как .html-файл и открывать в браузере пока не будем — всё равно мы ничего не увидим на странице, кроме названия вкладки.

  Добавляем форму поиска и текст

  Наша форма поиска — это поле ввода и кнопка, которая запускает скрипт. Мы не будем сильно настраивать внешний вид формы, при желании вы можете сделать это сами — все нужные знания для этого у вас уже есть. Если что-то забыли — посмотрите, как мы настраивали вид поля ввода в статье про планировщик задач.

  Добавим код формы сразу после тега :

  Осталось добавить сам текст в блок . Для простоты мы скопируем первые абзацы этой статьи и обернём их в HTML-теги. Вы можете вставить какой угодно текст, на работу скрипта это никак не повлияет.

  Общая идея

  У нас есть сайт с неким текстом, и нам нужно быстро находить в нём нужные слова или части слов. Для этого мы в самом начале страницы делаем поле ввода, куда будем писать наши слова для поиска, и кнопку, которая этот поиск запускает.

  Дальше скрипт берёт весь текст, находит в нём нужные фрагменты и подсвечивает их. Если он ничего не находит — пишет сообщение, что таких слов в тексте нет.

  Сохраняем, открываем в браузере:

  

  Настраиваем стили

  Стили отвечают за внешний вид всех элементов на странице. Главное, что нам нужно сделать, — нормальный внешний вид формы поиска и выбрать подсветку для найденных результатов. Это мы настроим в блоке в начале страницы:

  /*поле ввода*/ .searchtext < font-size: 16px; font-weight: bold; height: 27px; padding: 0 6px 0; width: 250px; /*делаем стильную границу вокруг поля*/ border: 1px solid rgba(0, 0, 0, 0.1); >/* выбираем цвет подсветки — светло-зелёный*/ .highlight < background: #4cff00; >/*кнопка поиска*/ .search-button < background-color: #0b2f3f; font-weight: bold; font-size: 12px; /*устанавливаем высоту кнопки*/ height: 28px; margin: 0; color: #ffffff; padding: 6px; /*тоже делаем стильную границу у кнопки*/ border: 1px solid rgba(0, 0, 0, 0.1); >

  Сохраняем и обновляем страницу — теперь форма выглядит лучше:

  

  Пишем скрипт

  Задача скрипта — пробежаться по всему содержимому текста и сравнить все слова с тем, что мы ввели в строке поиска. Всю работу за нас сделает плагин highlight, нам остаётся только вывести количество найденных совпадений и очистить страницу от предыдущих результатов поиска.

             
   
  Чтобы лучше понять, как работают библиотеки и плагины в веб-программировании, давайте с их помощью сделаем удобный поиск по странице. Мы знаем, что современные браузеры тоже умеют это делать, но мы сделаем свою версию, которая работает не хуже, чем в Хроме или Сафари. 
  Общая идея
   
  У нас есть сайт с неким текстом, и нам нужно быстро находить в нём нужные слова или части слов. Для этого мы в самом начале страницы делаем поле ввода, куда будем писать наши слова для поиска, и кнопку, которая этот поиск запускает.
   
  Дальше скрипт берёт весь текст, находит в нём нужные фрагменты и подсвечивает их. Если он ничего не находит — пишет сообщение о том, что таких слов в тексте нет.
   
   

  Как можно улучшить

  Можно убрать кнопку «Найти» и запускать поиск при вводе текста в поле.

  Можно сделать два поля ввода, подсвечивая найденное по каждому разными цветами. Это полезно, например, если нужно проанализировать, каких слов в тексте больше.

  Регулярные выражения! О них отдельно напишем, это же просто праздник какой-то.

  В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.

  Источник