Wie zeigt/versteckt man eine bestimmte Anzahl von Divs?

Question

Ich habe ein Problem beim Versuch, eine bestimmte Anzahl von divs anzuzeigen/auszublenden. Ich habe ein dynamisches Div erstellt, das alles drucken wird, aber nichts nach dem 5. Div verstecken. Wenn ich dann auf die Schaltfläche "Mehr laden" klicke, werden alle und "Weniger anzeigen" angezeigt, nur die ersten fünf Divs werden angezeigt. Ich habe es versucht, aber nicht funktioniert. Hier ist die 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

Ihre ursprüngliche Geige Kommas wurde anstelle von Semikolons in der for-Schleife, so dass die ursprüngliche Skript versagte - Dann wird der dom es produzierte war nicht das, was Ihre Wähler erwartet hatten.

Hier ist, wie ich das Problem gelöst:

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

Ich habe einige Änderungen an Ihrem Code und es funktioniert jetzt: 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(); 
    } 
});