Как показать/скрыть определенное количество div?

Question

У меня проблема с попыткой показать/скрыть определенное количество div. У меня есть динамический div, который будет печатать все, но скрыть что-нибудь после 5-го div. Затем, если я нажму кнопку «Загрузить еще», он отобразит все и «Показать меньше», будут отображаться только первые пять разделов. Я пробовал это, но не работал. Вот 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(); 
    } 
});