Question

我有

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 <li>7</li>
 <li>8</li>
 <li>9</li>
 <li>10</li>
 <li>11</li>
 <li>12</li>
 <li>13</li>
 <li>14</li>
 <li>15</li>
 <li>16</li>
 <li>17</li>
 <li>18</li>
 <li>19</li>
 <li>20</li>
</ul>

最初我只显示了10个li，但是当用户来到第10页时，我需要隐藏可见的10个li并显示接下来的10个li，并且还应该使用jquery反之亦然...就像google中的分页一样..

我尝试使用以下代码：

var currentIndex = $("div#pagination ul").children('li:visible').eq(-2).index(); 
var nextIndex = currentIndex + 10; 
$("div#pagination ul li:not(':first'):not(':last')").hide(); 
$('div#pagination ul li:lt(' + nextIndex + '):gt(' + currentIndex + ')').show();

第一＆amp;最后一个是上一个＆amp;下一个按钮，所以我需要在这些按钮之间显示和隐藏

谢谢...

解决方案：不是很有效但有效......

解决方案：

var e = currentPage,r=lastPage;

if(e >= 10 && e<20)
{
    $("div#pagination ul li:not(':first'):not(':last')").hide();
    $("div#pagination ul li:lt(21):gt(9)").show();
}
else if(e >=20)
{
    $("div#pagination ul li:not(':first'):not(':last')").hide();
    $("div#pagination ul li:lt("+(r+1)+"):gt(19)").show();
}
else
{
    $("div#pagination ul li:not(':first'):not(':last')").hide();
    $("div#pagination ul li:lt(11):gt(0)").show();
}

Google使用Jquery进行分页

0 个答案: