使用 display flex 检测最后一个项目

Question

在使用 javascript 应用 display flex/display none 之后，我想要一个 function 来检测最后一个包含 display flex 的项目，在我的示例中是字母 B。

示例代码：

 const containerDiv = document.querySelector('.container'); const listArray = Array.from(containerDiv.children); listArray.forEach((item) => { if(item.innerHTML === "A" || item.innerHTML === "B"){ item.style.display = "flex"; } else { item.style.display = "none"; } });

 <div class="container"> <div class="item">A</div> <div class="item">B</div> <div class="item">C</div> </div>

有任何想法吗？

Answer 1

而不是使用内联 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 您可以使用class和querySelectorAll使用.flex class 捕获最后一项

 const containerDiv = document.querySelector('.container'); const listArray = Array.from(containerDiv.children); listArray.forEach((item) => { if(item.innerHTML === "A" || item.innerHTML === "B"){ item.classList.add("flex"); } else { item.classList.add("none"); } }); const divFlex = [...containerDiv.querySelectorAll('div.flex')]; console.log(divFlex[divFlex.length - 1])

 .flex{ display:flex; }.none{ display:none; }

 <div class="container"> <div class="item">A</div> <div class="item">B</div> <div class="item">C</div> </div>