обойти элементы в блоке и выполнить поиск символа

Question

Есть блок:

<ul class="Nav__Level--All">
   <li class="Nav__Item--Level-3"><a class="Nav__Link--Level-3">Города:</a></li>
   <li class="Nav__Item--Level-3"><a class="Nav__Link--Level-3">Москва</a></li>
   <li class="Nav__Item--Level-3"><a class="Nav__Link--Level-3">Воронеж</a></li>
</ul>

Нужно в этом блоке найти элемент с символом ":" и покрасить этот элемент в красный цвет, в данном случае это Города: .

var obj = $('.Nav__Link--Level-3').text();
for(var item in obj){
        if(obj[item].indexOf(':') > -1){
            $(this).css("color", "red");
    }
}

Думал так получится, но нет..

Answer 1

Вместо обхода по строке, которую возвращает .text() лучше идти непосредственно по элементам, например с помощью .each, и проверять их текстовое содержимое, например с помощью свойства textContent

el.textContent.indexOf(':') > -1

Либо воспользоваться селектором :contains, который выбирает все элементы содержащие указанный текст.

Примеры:

var obj = $('.Nav__Link--Level-3').each((_, el) => {
  if (el.textContent.indexOf(':') > -1) {
    $(el).css("color", "red");
  }
});

var obj = $('.Nav__Link--Level-4:contains(":")').css("color", "green");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="Nav__Level--All">
  <li class="Nav__Item--Level-3"><a class="Nav__Link--Level-3">Города:</a></li>
  <li class="Nav__Item--Level-3"><a class="Nav__Link--Level-3">Москва</a></li>
  <li class="Nav__Item--Level-3"><a class="Nav__Link--Level-3">Воронеж</a></li>
</ul>

<ul class="Nav__Level--All">
  <li class="Nav__Item--Level-4"><a class="Nav__Link--Level-4">Города:</a></li>
  <li class="Nav__Item--Level-4"><a class="Nav__Link--Level-4">Москва</a></li>
  <li class="Nav__Item--Level-4"><a class="Nav__Link--Level-4">Воронеж</a></li>
</ul>

БЛОГ НА HUSL

обойти элементы в блоке и выполнить поиск символа

Ответы (1 шт):