<div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> <div"> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> <div"> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> <div" />

javascript/jqueryを使用して、ページ読み込み時にX個の子divを表示する方法

私は次のような構造の親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')

どうすればこれができますか?

3
次回は試したコードを共有してください
追加された 著者 mtizziani,

5 答え

:gt()セレクタを使って、特別な数よりも大きいインデックスを持つ要素を選択することができます。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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

純粋なJavaScriptを使ってこの作業を行うこともできます。

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

<div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false"> <div class="snippet-code snippet-currently-hidden">

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>
</div> </div>

4
追加された
私はこの答えが大好きです - コードを最小限に抑えること。うまくいってくれてありがとう、stackが私をさせてくれる時に正しいとマークします。
追加された 著者 George,

これはJSを使わずに、代わりにCSSの を使用して実行できます。 nth-child セレクタ:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

#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>
</div> </div>

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();
  }
});
1
追加された
これは diplsay:none を設定する代わりに要素を削除します。
追加された 著者 Mark Baijens,
jQueryの関数 hide()でも同じことができますが、私の意見では読みやすさの点では優れています。
追加された 著者 Mark Baijens,
@ mtizziani本当、あなたを怒らせるつもりはありませんでした。ちょっと一言。
追加された 著者 Mark Baijens,
編集済み、今は隠れている
追加された 著者 mtizziani,
@MarkBaijensもう一つの選択肢は、それをクラスで隠してaddclassを使うことで、100通りあり、間違っているものはありません。
追加された 著者 mtizziani,
ご回答ありがとうございます。これはうまくいきますが、Mohammadが最初に答え、彼の解決策もうまくいったので、私は彼を承認済みとしてマークする必要があります。私は投票します..ありがとうございます!
追加された 著者 George,

あなたはそれらのdivのためにcssをページロードで隠されるために加えることができます。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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" />
</div> </div>

1
追加された
謝罪 - div名は、例えば純粋に使われていました。動的に生成される名前が同じになることは決してありません。
追加された 著者 George,

これにはJS/jQueryも必要ありません。単純なCSS nth-child が機能します。しかし、必要に応じて、それをJSコードと組み合わせることができます。つまり、動的に設定します。将来の目標は不明ですが、純粋なCSSを使用して5番目以降のすべての要素を単に「選択」して非表示にすると、このようになります。

#container div:nth-child(n+6) {
  display: none;
}
1
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript