如果使用jQuery将文本设为“0”，如何隐藏“span”？

Question

我正在寻找隐藏包含0的跨度。我已经查看了其他代码并且我已经尝试调整它但我无法让它正常工作。我希望它只在内容为“0”时隐藏跨度，但是当运行下面的代码时，它也会隐藏任何包含0的数字，例如10，我不想要。

为了使它更清晰一点，只有当内部的数字大于0时才显示范围（它是一个从0开始的计数器，所以不管怎样都不能小于0）。

感谢任何帮助。

HTML

<div id="post-excerpts-likes">
    <a href="#" class="zilla-likes" id="zilla-likes-175519" title="Like this">
        <span class="zilla-likes-count">0</span>
    </a>
</div>

的jQuery

$(".zilla-likes-count:contains('0')").hide();

请注意，页面上的多个跨度都是同一个类，我希望代码能够影响所有。

Answer 1

您需要选择元素具有完全相同的文本，但:contains()不是您想要的。 .filter()是基于文本过滤所选元素的一个很好的函数。

$(".zilla-likes-count").filter(function(){
  return $(this).text().trim() === "0";
}).hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="post-excerpts-likes">
    <a href="#" class="zilla-likes" id="zilla-likes-175519" title="Like this">
        <span class="zilla-likes-count">Text0Text</span>
        <span class="zilla-likes-count">0</span>
    </a>
</div>

Answer 2

逐个循环遍历它们，并使用.text()：

检查内容

$(".zilla-likes-count").each(function(){
    if ($(this).text() === '0') {
        $(this).hide();
    }
});

Answer 3

您可以迭代每个匹配元素，然后检查其文本以查看它是否与“0”完全匹配，如果匹配则隐藏它。

你走了：

$(".zilla-likes-count").each((i,e) => e.textContent === '0' ? $(e).hide() : '');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="post-excerpts-likes">
    <a href="#" class="zilla-likes" id="zilla-likes-175519" title="Like this">
        <span class="zilla-likes-count">0</span>
        <span class="zilla-likes-count">10</span>
        <span class="zilla-likes-count">55</span>
                        
    </a>
   
</div>

Answer 4

简单..只需遍历类数组并检查其值是否包含0。所以，代码就像：

$(".zilla-likes-count").each(function(){
    if ($(this).text() === '0') $(this).hide();
});