如何显示文本大于0的标签

Question

如何选择从第3个span开始的所有span标签，只有数字大于0和li的toggleClass要阻止?

<li style="display: none !important;">
<span>1</span>
</li> 
<li style="display: none !important;">
<span>0</span>
</li>
<li style="display: none !important;">
<span>1</span>
</li> 
<li style="display: none !important;">
<span>4</span>
</li>
<li style="display: none !important;">
<span>1</span>
</li> 
<li style="display: none !important;">
<span>3</span>
</li>
<li style="display: none !important;">
<span>1</span>
</li> 
<li style="display: none !important;">
<span>0</span>
</li>

Answer 1

你的问题的问题是有很多潜在的答案。

我的例子将使用类，hidden和shown，这被认为是比嵌入样式属性更好的实践。如果你必须这样做，你可以通过.css():

$("li:gt(2) span:not(:contains('0'))").parent().css("display", "block");

示例1

$(function() {
$("li:gt(2) span:not(:contains('0'))").parent().toggleClass("hidden shown");
});

.hidden {
display: none;
}
.shown: {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="hidden">
<span>1</span>
</li>
<li class="hidden">
<span>0</span>
</li>
<li class="hidden">
<span>1</span>
</li>
<li class="hidden">
<span>4</span>
</li>
<li class="hidden">
<span>1</span>
</li>
<li class="hidden">
<span>3</span>
</li>
<li class="hidden">
<span>1</span>
</li>
<li class="hidden">
<span>0</span>
</li>
</ul>

你也可以这样做.each()甚至.map()。

示例2

$(function() {
$("li:gt(2)").each(function(i, el) {
var cnt = $(el).text().trim();
if (parseInt(cnt) > 0) {
$(el).toggleClass("hidden shown");
}
})
});

.hidden {
display: none;
}
.shown: {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="hidden">
<span>1</span>
</li>
<li class="hidden">
<span>0</span>
</li>
<li class="hidden">
<span>1</span>
</li>
<li class="hidden">
<span>4</span>
</li>
<li class="hidden">
<span>1</span>
</li>
<li class="hidden">
<span>3</span>
</li>
<li class="hidden">
<span>1</span>
</li>
<li class="hidden">
<span>0</span>
</li>
</ul>

看到更多:

• jQuery "not contains"选择
• https://api.jquery.com/gt-selector/
• https://api.jquery.com/not-selector/
• https://api.jquery.com/contains-selector/
• https://api.jquery.com/each/

Answer 2

// starting from 3-th span and only with numbers greater than 0
let spans = document.querySelectorAll('span');
// take 
spans = [...spans].slice(2).filter(span => {
const condition = +span.innerText > 0
condition && (span.parentNode.style.display = 'block')
return condition
})

<li style="display: none !important;">
<span>1</span>
</li> 
<li style="display: none !important;">
<span>0</span>
</li>
<li style="display: none !important;">
<span>1</span>
</li> 
<li style="display: none !important;">
<span>4</span>
</li>
<li style="display: none !important;">
<span>1</span>
</li> 
<li style="display: none !important;">
<span>3</span>
</li>
<li style="display: none !important;">
<span>1</span>
</li> 
<li style="display: none !important;">
<span>0</span>
</li>

Answer 3

我会在项目上使用类而不是内联样式，然后从第三个节点拾取span,slice，然后从其父节点删除隐藏类。

const spans = document.querySelectorAll('span');
[...spans].slice(2).forEach(span => {
if (span.textContent > 0) {
const item = span.parentElement;
item.classList.remove('hidden');
}
});

.hidden { display: none; }

<ul>
<li class="hidden"><span>1</span></li> 
<li class="hidden"><span>0</span></li>
<li class="hidden"><span>1</span></li> 
<li class="hidden"><span>4</span></li>
<li class="hidden"><span>1</span></li>
<li class="hidden"><span>3</span></li>
<li class="hidden"><span>1</span></li> 
<li class="hidden"><span>0</span></li>
</ul>