javascript - 如何使用核心 JavaScript 一次只显示几张卡片？

Question

所以，我已经在 jquery 中有一个满足此要求的工作代码，它显示指定数量的卡片/div。 由于某种原因，我被要求使用纯 javascript，但我无法在核心 javascript 中实现它。

这是我完整工作的 jquery 代码:

size_timelinediv = $("#timeline t").length;
console.log(size_timelinediv)//prints 5
var x = 3; //number of cards to be displayed
$("#timeline t:lt("+x+")").show(); //displays the first 3 <t> tags only

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="timeline" id="timeline" >
<t style="display:none"><div>Hi</div></t>
<t style="display:none"><div>Hello</div></t>
<t style="display:none"><div>How</div></t>
<t style="display:none"><div>Are</div></t>
<t style="display:none"><div>You</div></t>
</div>

现在根据要求我需要将此 jquery 代码转换为核心 javascript :

这是我尝试过的:

size_timelinediv = document.getElementById("timeline").querySelectorAll("t").length;
console.log(size_timelinediv)//prints 5
var x = 3;//number of cards to be displayed

document.getElementById("timeline").querySelectorAll("t:lt(" + x + ")").style.display = "block"; //this doesn't work

但这行不通。它给出以下错误:

"Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Element': 't:lt(3)' is not a valid selector."

如何使用核心 JavaScript 实现相同的功能？

Answer 1

CSS 选择器没有 :lt。有很多方法可以获取所选元素的 x 个第一个条目，例如使用 .slice(0, x) (将节点列表转换为数组后) :

let timelinediv = document.querySelectorAll("#timeline t");
console.log(timelinediv.length); // prints 5
let x = 3; // number of cards to be displayed
for (let t of [...timelinediv].slice(0, x)) t.style.display = "";

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="timeline" id="timeline" >
<t style="display:none"><div>Hi</div></t>
<t style="display:none"><div>Hello</div></t>
<t style="display:none"><div>How</div></t>
<t style="display:none"><div>Are</div></t>
<t style="display:none"><div>You</div></t>
</div>