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

Question

我有一堆 div 坐在 parent 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 控制页面加载时显示的 child div 的数量。我想理想地只显示前 5 个并将 child div 的其余部分设置为

.css('display', 'none')

如何做到这一点？

Answer 1

您可以使用 :gt() select 或者索引大于特殊数字的 select 元素。

$("#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>

Answer 2

看看jquery

的各个函数

let x = 5;
$(`#container`).find('div').each((index, element) => {
  // typeof index = number
  // typeof element = HTMLElement (not JQuery)
  if(index > x){
    $(element).css('display', 'none');
    // $(element).remove();
  }
});

Answer 3

您可以添加 css 以在页面加载时隐藏那些 div。

let x = 5;
$("#container div:lt("+x+")").css('display','none') // on load
$("#show").on("click",function(){
 $("#container div:lt("+x+")").css('display','block');
 $(this).hide();
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div id="container">
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>
    <div id="div5">5</div>
    <div id="div6">6</div>
    <div id="div7">7</div>
    <div id="div8">8</div>
    <div id="div9">9</div>
    <div id="div10">10</div>
</div>

<input type="button" value="show now" id="show" />

Answer 4

这可以在没有 JS 的情况下完成，而是使用 CSS 的 nth-child 选择器：

#container div:nth-child(n+6) { /* upto but not including 6th child */
  display: none;
}

<div id="container">
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>
    <div id="div5">5</div>
    <div id="div6">6</div>
    <div id="div7">7</div>
    <div id="div8">8</div>
    <div id="div9">9</div>
    <div id="div10">10</div>
</div>

Answer 5

您甚至不需要 JS/jQuery。简单的 CSS nth-child 就可以了。但如果你愿意，你可以将它与 JS 代码结合起来，即 - 动态设置它。我不确定你以后的目标是什么，但是简单地 "selecting" 并用纯 CSS 隐藏第五个之后的所有元素看起来像这样：

#container div:nth-child(n+6) {
  display: none;
}

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

How to show X amount of child divs on page load using JavaScript / jQuery?

html

javascript

jquery

jquery-selectors