Как на jQuery найти элементы по строке, которую они содержат?
В jQuery есть возможность задать селектор ‘contains’. Вот пример:
var foundin = $(''*:contains("Я просто строка")'');
Этот селектор возвращает массив объектов jQuery, который соответствует элементам DOM, содержащим заданный текст. Узнать больше можно в документации по jQuery (на английском языке).
Учтите: ‘*’ означает, что Вы получите все элементы, включая ‘html’ и ‘body’, что, скорее всего, Вам не нужно. Поэтому, наверное, предпочтительней написать что-то типа:
$(''div.find-in-me:contains("Я просто строка")'')
В этом случае поиск будет выполнен только по элементах DIV с классом 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>