<li> 当<span>内部包含某些文本时如何隐藏？

我想在以下代码中隐藏所有包含文本"__"的内容

<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网站插入代码，不确定这是否是代码不起作用的原因？请帮忙。

下面是一个堆栈代码段：

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

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

希望这有帮助

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

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

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

相关内容

最新更新

热门标签：