隐藏多个 div 和 ul 的 Next/Prev 链接

Question

这是 jquery prev/next 函数，仅适用于一组。如果我添加另一个 ul 集，则第二个集不起作用；下一个/上一个不起作用。我知道我需要对脚本代码进行一些更改，以便它可以与尽可能多的 ul 一起使用。

<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>
    <li>21</li>
</ul>
<a class="prev">prev</a> | <a class="next">next</a>

脚本是：

$('ul li:gt(4)').hide();

$('.prev').click(function() {
    var first = $('ul').children('li:visible:first');
    first.prevAll(':lt(5)').show();
    first.prev().nextAll().hide();
});

$('.next').click(function() {
    var last = $('ul').children('li:visible:last');
    last.nextAll(':lt(5)').show();
    last.next().prevAll().hide();
});
});

并添加 jquery.js 以使其正常工作。 现在我想知道如何使上面的这个脚本与许多 ul 和 div 一起工作而不会导致任何问题或错误。

更新#1： *我想改变下面的代码来适应另一个 div 和 ul（比如说我有 ul#block1 和 ul#block2.. 有没有更好的和更清洁的方式？？*

 $('ul#block1 li:gt(4)').hide();$('ul#block2 li:gt(4)').hide();

$('.prev').click(function() {
    var first = $('ul#block1').children('li:visible:first');
    var firstz = $('ul#block2').children('li:visible:first');
    first.prevAll(':lt(5)').show();
    first.prev().nextAll().hide();
});

$('.next').click(function() {
    var last = $('ul#block1').children('li:visible:last');
    var lastz = $('ul#block2').children('li:visible:last');
    last.nextAll(':lt(5)').show();
    last.next().prevAll().hide();
});
});

Answer 1

我认为您只需要一个标志来帮助脚本确定您尝试与之交互的分页部分。我选择通过将它们包装在带有公共类的<div> 中来做到这一点。

<div class="pages">
  <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>
  </ul>
  <a class="prev">prev</a> | <a class="next">next</a>
</div>
<div class="pages">
  <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>
  </ul>
  <a class="prev">prev</a> | <a class="next">next</a>
</div>

jQ

$('.pages ul').each(function() {
  $(this).children('li:gt(4)').hide();
})

$('.prev').click(function() {
    var first = $(this).parent('.pages').find('ul li:visible:first');
    first.prevAll(':lt(5)').show();
    first.prev().nextAll().hide();
});

$('.next').click(function() {
    var last = $(this).parent('.pages').find('ul li:visible:last');
    last.nextAll(':lt(5)').show();
    last.next().prevAll().hide();
});