Как на jQuery найти элементы по строке, которую они содержат?

Вопрос

Предположим, некая веб-страница содержит строку типа «Я просто строка». Как можно выполнить поиск элементов, которые содержат эту строку, используя jQuery? Например:

<div id="string-one">Я просто строка, самая обычная строка</div>
<div id="string-two">Я не просто строка. Я супер строка!</div>

В этом случае первый элемент должен быть найден, а второй — нет.

Ответ №1

В jQuery есть возможность задать селектор ‘contains’. Вот пример:

var foundin = $(''*:contains("Я просто строка")'');

Этот селектор возвращает массив объектов jQuery, который соответствует элементам DOM, содержащим заданный текст. Узнать больше можно в документации по jQuery (на английском языке).

Учтите: ‘*’ означает, что Вы получите все элементы, включая ‘html’ и ‘body’, что, скорее всего, Вам не нужно. Поэтому, наверное, предпочтительней написать что-то типа:

$(''div.find-in-me:contains("Я просто строка")'')

В этом случае поиск будет выполнен только по элементах DIV с классом find-in-me.

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

Пример

Я строка оранжевого дива с классом find-in-me
Я строка голубого дива с классом find-in-me

Я строка зелёного дива find-in-me, который содержится в голубом.

Код этого примера:

jQuery(''#find-text'').click(function(){
jQuery(''*'').css(''outline'', '''');
jQuery(''div.find-in-me:contains("'' + jQuery(''#thetext'').val() + ''")'').css(''outline'', ''3px solid blue'');
});
jQuery(''#find-text-all'').click(function(){
jQuery(''*'').css(''outline'', '''');
jQuery(''div:contains("'' + jQuery(''#thetext'').val() + ''")'').css(''outline'', ''3px solid blue'');
});

HTML-код:

<input type="button" id="find-text" value="Задать рамку элементам класса ‘find-in-me’ с заданным текстом" /><br/>
<input type="button" id="find-text-all" value="Задать рамку ВСЕМ дивам в документе с заданным текстом" /><br/>
<label>Текст для поиска:<input type="text" id="thetext" value="зелёного" /></label><br/>
<div class="find-in-me" style="width:500px;height:50px;background:orange;margin:5px;padding:5px;">Я строка оранжевого дива с классом find-in-me</div>
<div class="find-in-me" style="width:500px;height:100px;background:aqua;margin:5px;padding:5px;">Я строка голубого дива с классом find-in-me<div class="find-in-me" style="width:200px;height:50px;background:green;margin:5px;padding:5px;">Я строка зелёного дива find-in-me, который содержится в голубом.</div></div>

No responses yet

Добавить комментарий