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

隐藏下一个/上一个多个div和ul的链接

1 个答案: