0
40
2018-12-12

jQuery - Как найти элемент (блок, div) с определенным текстом

В данном примере мы рассмотрим как можно найти блок с определенным текстом на странице, при помощи jQuery.
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

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

Задача

Необходимо найти блок с текстом “featured”и удалить span блок который следует за родительским элементом нашего блока (с текстом). Затем удалить сам блок с текстом.

JS готовый скрипт

    jQuery(document).ready(function($){
        $('span.tg-cats-holder').each(function(){
            $(this).find('span.tg-item-term:contains("featured")').closest('a.product_visibility').next('span:contains(",")').remove();
            $(this).find('span.tg-item-term:contains("featured")').closest('a.product_visibility').remove();
        });
    });

Описание логики скрипта

Для решения данной задачи перебираем каждый (ну в данном примере я так решил) родительский блок в котором находятся все наши блоки с которыми необходимо произвести все манипуляции - в моем примере это блок “span.tg-cats-holder”. Перебор мы производим при помощи .each.

$('span.tg-cats-holder').each(function(){

Далее в функции ищем наш блок с текстом, за содержащийся в блоке текст отвечает:

:contains("featured")

После того как блок с текстом был найден переходим к родительскому блоку при помощи .closest:

.closest('a.product_visibility')

После перехода, находим находящийся рядом с родительским блоком span содержащий “|” и удаляем его:

.next('span:contains("|")').remove();

Далее, при помощи .remove() происходит удаление и самого блока.

Пример на CodePen.io