Jqueryで長い順不同リストを切り詰めるにはどうすればいいですか？

Question

私は、アルファベット順に並べ替えられたカテゴリのリストを表示するためにwordpressを使用しています。最初の20のリンクの後に "read more"リンクを追加するためにjQueryを使用したいと思います。ユーザーが「もっと読む」をクリックすると、残りのカテゴリが下にスライドして表示されます。リストのHTML形式は以下の通りです：

<ul id="catA"> 
    <h2>Categories</h2> 
    <li class="cat-item"> 
     <a title="title" href="#">Category Name</a> 
    </li> 
    <li class="cat-item"> 
     <a title="title" href="#">Category Name</a> 
    </li> 
    <li class="cat-item"> 
     <a title="title" href="#">Category Name</a> 
    </li> 
    ... 
</ul> 

私は<a href="#">view all categories</a>が20rhカテゴリの後にリストに追加され、その後、すべてを隠しすることにしたいです。私はいくつかのコードを書こうとする前に、これについて最善の方法を考えていますか？それは、その後、選択して余分のli要素を非表示に:gt() selectorの使用を行った後

Answer 1

これは、最も簡単な解決策ですが、仕事があります。

• リストの後に作成された「ビューのすべて」リンクをしようと、それを「＃CATA-viewall」のようなIDを与えます。
• すべての項目を非表示にする;
• 最初の20文字のみを表示する。

• [すべて表示]をクリックすると、すべての要素が表示されます。

  var $items = $('#catA').children(); 
  if ($items.length > 20) { 
      $items.hide().slice(0, 20).show(); 
      $('#catA-viewall').click(function() { 
       $items.fadeIn(); // or .show() 
       $(this).remove(); 
      }); 
  } else { 
      $('#catA-viewall').remove(); 
  } 
  

Answer 2

私は、あなたのビューのすべてのリンクを追加:eq() selectorは（それがをゼロインデックスであることに注意）を使用して、20日li要素を見つけるだろう。あなたは隠されたliを表示し、それ自身を削除するView Allリンクにイベントハンドラを添付する必要があります。

Answer 3

私はこのようにそれを行うだろう：

$('ul#catA').children('li').each(function (i) 
{ 
    if (i > 19) 
    { 
     $(this).hide(); 
    } 
}); 

var more = $('<li class="cat-item"><a href="">Show More</a></li>'); 
$('ul#catA').append(more); 

more.find('a').on('click', function(){ 
    $(this).parent().siblings('li').show(); 

    return false; 
}); 

ここでアクションの私の方法を示すjsfiddleです。

---

私は:gt()セレクタを使用して上の@ nachitoの勧告に基づいて更新jsfiddleを作成しました。また何が起こっているのかを説明するコメントを追加しました。