0

私は次のサイト構造を持っています

<div id="movies">

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

</div>

a tags内部には最大 50 個まで存在できます#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'。理由はありますか？アイデアを機能させるには、何を変更/追加する必要がありますか?

4

4 に答える 4

6

少し奇妙ないくつかのプラクティスを使用しています。

  • nth-child;でループを使用しないでください。そのまま使用して$("#movies a").slice(10).hide()ください。
  • ループhidden.each(function() { ... })ではなく使用してください。for inここでは.slice、有利に使用することもできます。
  • インクリメントしませんcount。それは常にな0ので、if句は常に真です。
于 2012-06-08T20:53:46.617 に答える
5

for(.. in ..)プロパティをループするため、ループすることはできません。jQuerys の各メソッドを使用します。

hidden.each(function() {
     var element = $(this);
     if(count <= 10)
        element.show();
});
于 2012-06-08T20:53:55.947 に答える
2

以下のような簡単な解決策を試してください。

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

デモ: http://jsfiddle.net/fKuGT/1

于 2012-06-08T20:57:10.403 に答える
0

hiddenjQuery オブジェクトです。を使用してループしないでくださいfor..in。を使用し.eachます。

hidden.each(function(){
    if(count <= 10){
        $(this).show();
    }
});
于 2012-06-08T20:54:28.993 に答える