Как на 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>

Нет комментариев

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


(обязательно)