特定の数のdivを表示/非表示にするにはどうすればよいですか？

Question

特定の数のdivを表示/非表示にする際に問題があります。私はすべてを印刷する動的divを作成しましたが、5番目のdivの後には何も隠しません。次に、 "Load More"ボタンをクリックすると、すべてが表示され、 "Show Less"が表示されます。最初の5つのdivのみが表示されます。私はこれを試みたが、うまくいかなかった。そして、それが生産されたDOMは、あなたのセレクタは期待していたものではありませんでした - 。ここにあなたのオリジナルフィドルがためのループでコンマの代わりにセミコロンを使用していた最初のスクリプトが失敗していたので、jsfiddle.

var vidThumbnail = ""; 
for(i = 0, i < 25, i++) 
{ 
    vidThumbnail = '<div class="video-thumbnail">child ' + i + '</div>'; 

    // if the child elements reaches 5 thumbnails, hide the rest 
    if($('.section.thumbnail .thumb > .video-thumbnail:gt(5)')) 
    { 
     $('.section.thumbnail .thumb').append(vidThumbnail).hide(); 
    } 
    else 
    { 
     $('.section.thumbnail .thumb').append(vidThumbnail).slice(0,5); 
    } 
} 

$('#loadMore').click(function() // show them all 
{ 
    $('.section.thumbnail .thumb').show(); 
}); 

$('#showLess').click(function() // hide all up to the first 5 thumbnails 
{ 
    $('.section.thumbnail .thumb > .video-thumbnail').slice(0,5); 
}); 

<section class="section thumbnail"> 
    <h1>Thumbnail Divs</h1> 
    <div class="thumb"></div> 
    <div id="loadMore">Load More</div> 
    <div id="showLess">Show Less</div> 
</section> 

Answer 1

ですここで

は、私は問題を解決する方法である：

https://jsfiddle.net/9pcp72bk/3/

var vidThumbnail = ""; 

var hideAdditionalThumbs = function() { 
    var elements = $('.section.thumbnail .thumb > .video-thumbnail'); 
    for (var i = 5; i < elements.length; i++) { 
     $(elements[i]).hide(); 
    } 
}; 

$('#loadMore').click(function() // show them all 
    { 
    $('.section.thumbnail .thumb .video-thumbnail').show(); 
    }); 

$('#showLess').click(hideAdditionalThumbs); 

for (i = 0; i < 25; i++) { 
    vidThumbnail = '<div class="video-thumbnail">child ' + i + '</div>'; 

    $('.section.thumbnail .thumb').append(vidThumbnail); 
     hideAdditionalThumbs() 
} 

Answer 2

私はあなたのコードにいくつかの編集を行なったし、それが今取り組んでいる：https://jsfiddle.net/IA7medd/hc5pL6ju/

var vidThumbnail = ""; 
for(i = 0; i < 25; i++) 
{ 
    vidThumbnail = '<div class="video-thumbnail">child ' + i + '</div>'; 
    $('.section.thumbnail .thumb').append(vidThumbnail); 

    // if the child elements reaches 5 thumbnails, hide the rest 
    if(i>5) { 
     $('.video-thumbnail').eq(i).hide(); 
    } 
} 

$('#loadMore').click(function() // show them all 
{ 
    $('.video-thumbnail').show(); 
}); 

$('#showLess').click(function() // hide all up to the first 5 thumbnails 
{ 
    for(i=5; i<25; i++){ 
     $('.video-thumbnail').eq(i).hide(); 
    } 
});