Question

I have following site structure

<div id="movies">

     <a href="">
         <div>content</div>
     </a> 
     <a href="">
         <div>content</div>
     </a>
     ...    

</div>

There can be up to 50 a tags inside #movies. I want to show only 10 and reveal another
10 if the user requests it.

So I came up with following jquery code.

   var count = $("#movies a").length;

   if(count > 10){
       for(i = 11; i <= count; i++){
          $('#movies a:nth-child('+i+')').hide();   
       }
       $('#more').append('<a>show more</a>');
   }

   $('#more a').click(function(){
       var hidden = $("#movies a").filter(":hidden");

       var count = 0;
       for(element in hidden){
           if(count <= 10){
               element.show();
           }
       }
   });

But this gives me Uncaught TypeError: Object 0 has no method 'show'. Any ideas why? What do I need to change/add to make the idea work?

Answer 1

You’re using some practices which are a little weird:

• Don’t use a loop with nth-child; just use $("#movies a").slice(10).hide().
• Use hidden.each(function() { ... }) and not a for in loop. Here, you could also use .slice to your advantage.
• You don’t increment count; it’s 0 all the time so the if clause is always true.