1. 首页
  2. 问题列表
  3. 当内部包含特定文本时，如何隐藏
  4. ？
提问者：小点点

当<span>内部包含特定文本时，如何隐藏<li>？


我想在下面的代码中隐藏所有包含文本“__”的

<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>

但不管用。 我正在通过谷歌标签管理器为Wordpress网站插入代码，不知道这是不是代码不能工作的原因？ 请帮帮我。

下面是一个堆栈片段:

null

$(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>

null


共3个答案

匿名用户

.bc-product__spec-title标识具有内容的span，而不是其父项。 因此您不需要子选择器，请在该元素本身上使用:contains。 然后使用.closest（“li”）选择li，以防HTML稍有更改:

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

实时副本:

null

$(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>

匿名用户

循环方法-检查项目列表，然后确定它们是否包含指定的值。

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

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

null

$(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>

匿名用户 

 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";
      }
    }
  };

希望这有帮助

相关问题



热门标签
Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS