Как скрыть/показать элемент с определенным текстом?

Question

[Mracula]

Есть такой код, нужно что-бы label которые не содержат в названии "Цвет:", присваивался определенный класс.

<div class="input-option option__group">
<label class="option__group-name"> Цвет:</label>
</div>
<div class="input-option option__group">
<label class="option__group-name"> Размер:</label>
</div>

if ($('.option__group > label:contains("Цвет")').length > 0) {
    $(".option__group").addClass("displayblock");
}

тут, на сколько я понимаю, проверяется вообще есть ли какой либо текст. А можно ли сделать проверку именно того что написано?

Comments

[Николай Медведков]

конечно можно

Answer 1

[alexalexes]

let group_list = document.querySelectorAll('.option__group');
group_list.forEach(function(g_e)
{
 if(g_e.querySelector('label').innerHTML == ' Цвет:' )
 {
  g_e.classList.add("displayblock");
 }
 else
 {
   g_e.classList.remove("displayblock");
 }
});

Comments

[Mracula]

<div class="input-option option__group">
<label class="option__group-name"> Цвет:</label>
</div>
<div class="input-option option__group">
<label class="option__group-name"> Размер:</label>
</div>

Понял, что не много не верно к задаче подошел. Нужно скрыть все классы "option__group", кроме того в котором написано Цвет:
Так получается что если есть текст Цвет, то всех "option__group" , добавляется класс displayblock

[alexalexes]

Возьмите все элементы option__group и переберите в цикле.
Тем, которые имеют label с нужным содержимым - добавьте нужный класс.
У тех, которые не имеют - заберите класс.

Answer 2

[Mracula]

В итоге решил через CSS

.option__group:nth-of-type(1) {display:block!important}

а остальным присвоил {display:none}