Как мне скрыть <li>, если <span>внутри содержит определенный текст?

Question

Я хотел бы скрыть все, что содержит текст «__» внутри следующего кода

<ul class="bc-product__spec-list">
    <li class="bc-product__spec">
        <span class="bc-product__spec-title">Weight:</span>
        <span class="bc-product__spec-value">0.5 kg</span>
    </li>
    <li class="bc-product__spec">
        <span class="bc-product__spec-title">Width:</span>
        <span class="bc-product__spec-value">25 cm</span>
    </li>
    <li class="bc-product__spec">
        <span class="bc-product__spec-title">Depth:</span>
        <span class="bc-product__spec-value">8 cm</span>
    </li>
    <li class="bc-product__spec">
        <span class="bc-product__spec-title">Height:</span>
        <span class="bc-product__spec-value">8.5 cm</span>
    </li>

    <li class="bc-product__spec">
        <span class="bc-product__spec-title">Series:</span>
        <span class="bc-product__spec-value">Boxco S Series</span>
    </li>
    <li class="bc-product__spec">
        <span class="bc-product__spec-title">Enclosure - Base Colour:</span>
        <span class="bc-product__spec-value">Grey</span>
    </li>

    <li class="bc-product__spec">
        <span class="bc-product__spec-title">__length:</span>
        <span class="bc-product__spec-value">80mm</span>
    </li>
    <li class="bc-product__spec">
        <span class="bc-product__spec-title">__width:</span>
        <span class="bc-product__spec-value">250mm</span>
    </li>
    <li class="bc-product__spec">
        <span class="bc-product__spec-title">__height:</span>
        <span class="bc-product__spec-value">85mm</span>
    </li>
    <li class="bc-product__spec">
        <span class="bc-product__spec-title">__packing unit:</span>
        <span class="bc-product__spec-value">carton</span>
    </li>
    <li class="bc-product__spec">
        <span class="bc-product__spec-title">__packing qty:</span>
        <span class="bc-product__spec-value">32</span>
    </li>
    <li class="bc-product__spec">
        <span class="bc-product__spec-title">__related_product_json:</span>
        <span class="bc-product__spec-value">/content/related_json/related-BC-CGS-082508-K-en.json</span>
    </li>
    <li class="bc-product__spec">
        <span class="bc-product__spec-title">Unit of Measure:</span>
        <span class="bc-product__spec-value">item</span>
    </li>
</ul>

Я пробовал

<script>
  $(document).ready(function() {
    $(".bc-product__spec-title > span:contains('__')").parent().hide();
  });
</script>

, но это не работает. И я вставляю код через Google Tag Manager для сайта Wordpress, не уверен, почему код не работает? Пожалуйста, помогите.

Вот фрагмент стека:

$(document).ready(function() {
  $(".bc-product__spec-title > span:contains('__')").parent().hide();
});

<ul class="bc-product__spec-list">
  <li class="bc-product__spec">
    <span class="bc-product__spec-title">Weight:</span>
    <span class="bc-product__spec-value">0.5 kg</span>
  </li>
  <li class="bc-product__spec">
    <span class="bc-product__spec-title">Width:</span>
    <span class="bc-product__spec-value">25 cm</span>
  </li>
  <li class="bc-product__spec">
    <span class="bc-product__spec-title">Depth:</span>
    <span class="bc-product__spec-value">8 cm</span>
  </li>
  <li class="bc-product__spec">
    <span class="bc-product__spec-title">Height:</span>
    <span class="bc-product__spec-value">8.5 cm</span>
  </li>

  <li class="bc-product__spec">
    <span class="bc-product__spec-title">Series:</span>
    <span class="bc-product__spec-value">Boxco S Series</span>
  </li>
  <li class="bc-product__spec">
    <span class="bc-product__spec-title">Enclosure - Base Colour:</span>
    <span class="bc-product__spec-value">Grey</span>
  </li>

  <li class="bc-product__spec">
    <span class="bc-product__spec-title">__length:</span>
    <span class="bc-product__spec-value">80mm</span>
  </li>
  <li class="bc-product__spec">
    <span class="bc-product__spec-title">__width:</span>
    <span class="bc-product__spec-value">250mm</span>
  </li>
  <li class="bc-product__spec">
    <span class="bc-product__spec-title">__height:</span>
    <span class="bc-product__spec-value">85mm</span>
  </li>
  <li class="bc-product__spec">
    <span class="bc-product__spec-title">__packing unit:</span>
    <span class="bc-product__spec-value">carton</span>
  </li>
  <li class="bc-product__spec">
    <span class="bc-product__spec-title">__packing qty:</span>
    <span class="bc-product__spec-value">32</span>
  </li>
  <li class="bc-product__spec">
    <span class="bc-product__spec-title">__related_product_json:</span>
    <span class="bc-product__spec-value">/content/related_json/related-BC-CGS-082508-K-en.json</span>
  </li>
  <li class="bc-product__spec">
    <span class="bc-product__spec-title">Unit of Measure:</span>
    <span class="bc-product__spec-value">item</span>
  </li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

Циклический подход - Проверка списка элементов и затем определение, содержат ли они указанное значение.

$(document).ready(function () {
    const product = $(".bc-product__spec-title");

    $(product).each(function (index) {
        if ($(this).text().indexOf("__") >= 0) {
            $(this).parent().hide();
        }
    });
});

$(document).ready(function () {
    const product = $(".bc-product__spec-title");

    $(product).each(function (index) {
        if ($(this).text().indexOf("__") >= 0) {
            $(this).parent().hide();
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="bc-product__spec-list">
    <li class="bc-product__spec">
        <span class="bc-product__spec-title">Weight:</span>
        <span class="bc-product__spec-value">0.5 kg</span>
    </li>
    <li class="bc-product__spec">
        <span class="bc-product__spec-title">Width:</span>
        <span class="bc-product__spec-value">25 cm</span>
    </li>
    <li class="bc-product__spec">
        <span class="bc-product__spec-title">Depth:</span>
        <span class="bc-product__spec-value">8 cm</span>
    </li>
    <li class="bc-product__spec">
        <span class="bc-product__spec-title">Height:</span>
        <span class="bc-product__spec-value">8.5 cm</span>
    </li>

    <li class="bc-product__spec">
        <span class="bc-product__spec-title">Series:</span>
        <span class="bc-product__spec-value">Boxco S Series</span>
    </li>
    <li class="bc-product__spec">
        <span class="bc-product__spec-title">Enclosure - Base Colour:</span>
        <span class="bc-product__spec-value">Grey</span>
    </li>

    <li class="bc-product__spec">
        <span class="bc-product__spec-title">__length:</span>
        <span class="bc-product__spec-value">80mm</span>
    </li>
    <li class="bc-product__spec">
        <span class="bc-product__spec-title">__width:</span>
        <span class="bc-product__spec-value">250mm</span>
    </li>
    <li class="bc-product__spec">
        <span class="bc-product__spec-title">__height:</span>
        <span class="bc-product__spec-value">85mm</span>
    </li>
    <li class="bc-product__spec">
        <span class="bc-product__spec-title">__packing unit:</span>
        <span class="bc-product__spec-value">carton</span>
    </li>
    <li class="bc-product__spec">
        <span class="bc-product__spec-title">__packing qty:</span>
        <span class="bc-product__spec-value">32</span>
    </li>
    <li class="bc-product__spec">
        <span class="bc-product__spec-title">__related_product_json:</span>
        <span class="bc-product__spec-value">/content/related_json/related-BC-CGS-082508-K-en.json</span>
    </li>
    <li class="bc-product__spec">
        <span class="bc-product__spec-title">Unit of Measure:</span>
        <span class="bc-product__spec-value">item</span>
    </li>
</ul>

Answer 2

 window.onload = function () {
    //firstly we select all li elements with the class "bc-product__spec"
    var allListItems = document.getElementsByClassName("bc-product__spec");

    for (var i = 0; i < allListItems.length; i++) {
      //we get the span in the current li item
      var item = allListItems.item(i).firstElementChild;
      if (item.innerHTML == "__") {
        //we final set the display style property of the li to none if its span contains a certain word "__" in my case
        allListItems.item(i).style.display = "none";
      }
    }
  };

надеюсь, это поможет

Answer 3

.bc-product__spec-title определяет диапазон, содержащий содержимое, а не его родительский элемент. Таким образом, вам не нужен дочерний селектор, используйте :contains для самого этого элемента. Затем я бы использовал .closest("li"), чтобы выбрать li, на всякий случай HTML немного изменится:

$(document).ready(function() {
  $(".bc-product__spec-title:contains('__')").closest("li").hide();
});

Живая копия:

$(document).ready(function() {
  $(".bc-product__spec-title:contains('__')").closest("li").hide();
});

<ul class="bc-product__spec-list">
  <li class="bc-product__spec">
    <span class="bc-product__spec-title">Weight:</span>
    <span class="bc-product__spec-value">0.5 kg</span>
  </li>
  <li class="bc-product__spec">
    <span class="bc-product__spec-title">Width:</span>
    <span class="bc-product__spec-value">25 cm</span>
  </li>
  <li class="bc-product__spec">
    <span class="bc-product__spec-title">Depth:</span>
    <span class="bc-product__spec-value">8 cm</span>
  </li>
  <li class="bc-product__spec">
    <span class="bc-product__spec-title">Height:</span>
    <span class="bc-product__spec-value">8.5 cm</span>
  </li>

  <li class="bc-product__spec">
    <span class="bc-product__spec-title">Series:</span>
    <span class="bc-product__spec-value">Boxco S Series</span>
  </li>
  <li class="bc-product__spec">
    <span class="bc-product__spec-title">Enclosure - Base Colour:</span>
    <span class="bc-product__spec-value">Grey</span>
  </li>

  <li class="bc-product__spec">
    <span class="bc-product__spec-title">__length:</span>
    <span class="bc-product__spec-value">80mm</span>
  </li>
  <li class="bc-product__spec">
    <span class="bc-product__spec-title">__width:</span>
    <span class="bc-product__spec-value">250mm</span>
  </li>
  <li class="bc-product__spec">
    <span class="bc-product__spec-title">__height:</span>
    <span class="bc-product__spec-value">85mm</span>
  </li>
  <li class="bc-product__spec">
    <span class="bc-product__spec-title">__packing unit:</span>
    <span class="bc-product__spec-value">carton</span>
  </li>
  <li class="bc-product__spec">
    <span class="bc-product__spec-title">__packing qty:</span>
    <span class="bc-product__spec-value">32</span>
  </li>
  <li class="bc-product__spec">
    <span class="bc-product__spec-title">__related_product_json:</span>
    <span class="bc-product__spec-value">/content/related_json/related-BC-CGS-082508-K-en.json</span>
  </li>
  <li class="bc-product__spec">
    <span class="bc-product__spec-title">Unit of Measure:</span>
    <span class="bc-product__spec-value">item</span>
  </li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>