Как показать количество дочерних элементов X при загрузке страницы с помощью JavaScript / jQuery?

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>

Можно ли каким-либо образом контролировать количество дочерних элементов div, отображаемых при загрузке страницы, с помощью JS или jQuery.В идеале я хочу просто отобразить первые 5 и установить для остальных дочерних элементов

.css('display', 'none')

Как это можно сделать?

Answer 1

Вам даже не нужен JS / jQuery для этого.Простой CSS nth-child будет работать.Но если вы хотите, вы можете объединить его с JS-кодом, то есть установить динамически.Я не уверен, какова ваша цель на будущее, но просто «выделение» и скрытие всех элементов после пятого с чистым CSS выглядит так:

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

Answer 2

Это можно сделать без 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 3

взгляните на каждую функцию 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 4

Вы можете добавить 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 5

Вы можете использовать :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>