Скрыть/Показать элементы с JQuery

Question

я следующие структуры сайта

<div id="movies"> 

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

</div> 

Там может быть до 50 a tags внутри #movies. Я хочу показать только 10 и показать еще 10, если пользователь запросит его.

Итак, я придумал следующий код jquery.

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(); 
      } 
     } 
    }); 

Но это дает мне Uncaught TypeError: Object 0 has no method 'show'. Любые идеи почему? Что мне нужно изменить/добавить, чтобы идея работала?

Answer 1

Вы используете некоторые методы, которые немного странно:

• Не использовать цикл с nth-child; просто используйте $("#movies a").slice(10).hide().
• Использование hidden.each(function() { ... }) и не for in петля. Здесь вы также можете использовать .slice в ваших интересах.
• Вы не увеличиваете число count; это 0 все время, поэтому предложение if всегда верно.

Answer 2

Вы не можете использовать петлю с использованием for(.. in ..), поскольку это перебирает свойства. Используйте jQuerys каждый метод:

hidden.each(function() { 
    var element = $(this); 
    if(count <= 10) 
     element.show(); 
}); 

Answer 3

hidden является объектом JQuery. Не перегибайте его, используя for..in. Используйте .each.

hidden.each(function(){ 
    if(count <= 10){ 
     $(this).show(); 
    } 
}); 

Answer 4

Попробуйте простое решение, как показано ниже,

$(function() { 
    $("#movies a:gt(9)").hide(); 

    var $moviesA = $('#movies a'); 
    $('#more a').click(function(){ 
     var $visibleA = $("#movies a :visible"); //Edit: added a space 
     $moviesA.slice($visibleA.length, $visibleA.length + 10).show(); 
    }); 
}); 

DEMO:http://jsfiddle.net/fKuGT/1