Как можно скрыть или отобразить элемент, содержащий определенный текст?

Question

Аполлинарий

javascript , css

Как можно скрыть или отобразить элемент, содержащий определенный текст?

В приведенном коде необходимо реализовать добавление определенного класса для элементов `<label>`, которые не содержат текст "Цвет:". Как это сделать? <br/> <pre><code class="html">&lt;div class="input-option option__group"&gt;
&lt;label class="option__group-name"&gt; Цвет:&lt;/label&gt;
&lt;/div&gt;
&lt;div class="input-option option__group"&gt;
&lt;label class="option__group-name"&gt; Размер:&lt;/label&gt;
&lt;/div&gt;</code></pre> <br/> <pre><code class="javascript">if ($('.option__group &gt; label:contains("Цвет")').length &gt; 0) {
    $(".option__group").addClass("displayblock");
}</code></pre> <br/> В текущей реализации проверяется наличие текста, но можно ли изменить условие для проверки именно на соответствие тексту в <label>?

10 марта 2025 г. 11:04

Ответы на вопрос 3

Похожие вопросы

Answer 1

Да, вы можете изменить условие проверки текста в элементе `<label>`, чтобы добавлять класс только для тех `<label>`, которые **не** содержат текст "Цвет:". 

В вашем коде можно использовать метод `.not()` в сочетании с селектором `:contains()`, чтобы отфильтровать элементы, которые содержат данный текст.

Вот как это можно сделать:

```javascript
$('.option__group > label').not(':contains("Цвет:")').each(function() {
    $(this).closest('.option__group').addClass("displayblock");
});
```

### Пояснение:
1. `$('.option__group > label')` выбирает все элементы `<label>` внутри контейнера `.option__group`.
2. `.not(':contains("Цвет:")')` исключает из выборки те `<label>`, которые содержат текст "Цвет:".
3. `.each(function() {...})` перебирает оставшиеся элементы.
4. Внутри функции `$(this).closest('.option__group').addClass("displayblock");` добавляет класс `displayblock` к родительскому элементу `.option__group`.

Таким образом, класс `displayblock` будет добавлен только к тем `.option__group`, которые содержат `<label>`, не имеющий текст "Цвет:".

Answer 2

<pre><code class="javascript">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");
 }
});</code></pre>

Answer 3

В итоге решил через CSS <br/> <pre><code class="css">.option__group:nth-of-type(1) {display:block!important}</code></pre> <br/> а остальным присвоил {display:none}