フィルタリングされたコンテンツを最初のページに表示するのではなく、すべてのコンテンツを表示する

Question

まだjqueryに精通していません。自分のコードに基づいて、ユーザーは「カテゴリ1」または「カテゴリ2」をクリックしてコンテンツをフィルタリングでき、コンテンツのページ設定が可能です。

現在、私のコードはすべての内容を最初のページと残りのページに表示しています。私が望むのは、スタートページには「カテゴリ1」の内容のみが表示され、ボタン/リンクはクリックされません。

私が望む結果を以下に示す：項目1、2、3、4、5、6、13および14は、 "カテゴリー1" の下にある

あなたのいくつかは私に提供できることを期待して

をいくつかの助言を得て。ありがとう！

var visible = ""; 
 
var liToShow = $('li'); 
 
$('div.filter').delegate('a', 'click', function (event) { 
 
    visible = '.' + this.href.slice(this.href.indexOf("#") + 1); 
 
$('ul.items li').hide(); 
 
$(visible).show(); 
 
liToShow = $(visible); 
 
pagination(); 
 
    event.preventDefault(); 
 
}); 
 

 
pageSize = 8; 
 
var i = 1; 
 
showPage = function(page) { 
 
$("li").hide(); 
 
$("li").each(function(n) { 
 
    if (n >= pageSize * (page - 1) && n < pageSize * page) 
 
     $(this).show(); 
 
});   
 
} 
 

 
showPage(i); 
 

 
function pagination(action) { 
 

 
var pages = Math.ceil(liToShow.length/pageSize); 
 
$('#pager').html(""); 
 
for (var i = 0; i<pages; i++) { 
 
    $('#pager').append('<a href="#" class="pageClick">'+(i+1)+'</a> &nbsp;'); 
 
} 
 
$('.pageClick').on('click', function(e) { 
 
    e.preventDefault(); 
 
    showPage($(this).index()+1); 
 
}); 
 

 
} 
 

 
pagination();

ul{list-style: none;} 
 

 
#item-wrapper { 
 
width:250px; 
 
margin:30px 0 0 30px; 
 
} 
 
.items li { 
 
font-family:arial; 
 
font-size:13px; 
 
background-color:#ccc; 
 
margin-bottom:1px; 
 
padding:5px;  
 
} 
 
.ctrl-nav { 
 
    background-color:#999; 
 
    padding:5px; 
 
    overflow:hidden; 
 
} 
 
.ctrl-nav a { 
 
    font-family:arial; 
 
font-size:13px; 
 
    padding:5px 10px; 
 
    color:#fff; 
 
} 
 
.ctrl-nav a#prev{ 
 
float:left; 
 
} 
 
.ctrl-nav a#next{ 
 
float:right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="filter"> 
 
    <a href="#category-1">category 1</a> 
 
    <a href="#category-2">category 2</a> 
 
</div> 
 

 
<div id="item-wrapper"> 
 
<ul class="items"> 
 
    <li class="category-1">item 1</li> 
 
    <li class="category-1">item 2</li> 
 
    <li class="category-1">item 3</li> 
 
    <li class="category-1">item 4</li> 
 
    <li class="category-1">item 5</li> 
 
    <li class="category-1">item 6</li> 
 
    <li class="category-2">item 7</li> 
 
    <li class="category-2">item 8</li> 
 
    <li class="category-2">item 9</li> 
 
    <li class="category-2">item 10</li> 
 
    <li class="category-2">item 11</li> 
 
    <li class="category-2">item 12</li> 
 
    <li class="category-1">item 13</li> 
 
    <li class="category-1">item 14</li> 
 
    <li class="category-2">item 15</li> 
 
</ul> 
 

 
<div id="pager"></div> 
 
</div>

Answer 1

ちょうどこの

$(document).ready(function(){ 
    $('div.filter a:first-child').trigger('click'); 
});