javascript - 如何使用 JavaScript/jQuery 在页面加载时显示 X 数量的子 div？

Question

我有一堆 div 位于父 div 中，结构如下:

<div id="container">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
    <div id="div5"></div>
    <div id="div6"></div>
    <div id="div7"></div>
    <div id="div8"></div>
    <div id="div9"></div>
    <div id="div10"></div>
</div>

有什么方法可以控制使用 JS 或 jQuery 加载页面时显示的子 div 的数量。我想理想地只显示前 5 个并将其余的子 div 设置为

.css('display', 'none')

如何做到这一点？

Answer 1

您可以使用 :gt() 选择器来选择索引大于特殊数字的元素。

$("#container div:gt(4)").hide();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="div1">div1</div>
  <div id="div2">div2</div>
  <div id="div3">div3</div>
  <div id="div4">div4</div>
  <div id="div5">div5</div>
  <div id="div6">div6</div>
  <div id="div7">div7</div>
  <div id="div8">div8</div>
  <div id="div9">div9</div>
  <div id="div10">div10</div>
</div>

您也可以使用纯 javascript 来完成这项工作。

document.querySelectorAll("#container div").forEach(function(ele, i){
  i > 4 ? ele.style.display = "none" : '';
})

document.querySelectorAll("#container div").forEach(function(ele, i){
  i > 4 ? ele.style.display = "none" : '';
})

<div id="container">
  <div id="div1">div1</div>
  <div id="div2">div2</div>
  <div id="div3">div3</div>
  <div id="div4">div4</div>
  <div id="div5">div5</div>
  <div id="div6">div6</div>
  <div id="div7">div7</div>
  <div id="div8">div8</div>
  <div id="div9">div9</div>
  <div id="div10">div10</div>
</div>