使用.next从一个UL遍历到另一个UL

Question

我已经陷入了一些看似可能的事情,我只是无法弄清楚它2天!

我在.js文件中有这个:

Mousetrap.bind('right', function() { $('li.active').next().click();  });
Mousetrap.bind('left', function() {  $('li.active').prev().click(); });

上面是键盘右/左移动以通过按键UL中的所有LI.

然后我在我的HTML中有这个; 这是两个UL的.

此刻,当我点击第一个UL中的最后一个项目时,它会停止.我试图让它跳到下面的UL中的下一个LI.

我试图找出如何使用nextAll() - 多列表遍历但无济于事,任何人都有任何想法？

<div class="item active">
<ul class="thumbnails">
  <li class="trigger active" data-target="0" data-fieldclass="data1">
    <p class="image"><img src="images/sias-duplessis.jpg" alt="Sias Du Plessis"></p>
    <p>@siasduplessis</p>
    <p>#RedFury</p>
  </li>
  <li class="trigger" data-target="1" data-fieldclass="data2">
    <p class="image"><img src="images/lance-witten.jpg" alt="Lance Witten"></p>
    <p>@LanceTheWitten</p>
    <p>#pegasus</p>
  </li>
  <li class="trigger" data-target="2" data-fieldclass="data3">
    <p class="image"><img src="images/sasha.jpg" alt="Sasha Martinengo"></p>
    <p>@F1sasha</p>
    <p>#BallztotheWallz</p>
  </li>
  <li class="trigger" data-target="3" data-fieldclass="data4">
    <p class="image"><img src="images/sipho.jpg" alt="Comrade Sipho"></p>
    <p>@comradesipho</p>
    <p>#badexample</p>
  </li>
  <li class="trigger" data-target="4" data-fieldclass="data5">
    <p class="image"><img src="images/carl-wastie.jpg" alt="Carl Wastie"></p>
    <p>@carlwastie</p>
    <p>#FrickinHORSome</p>
  </li>
</ul>
</div>

<div class="item">
<ul class="thumbnails">
  <li class="trigger" data-target="5" data-fieldclass="data6">
    <p class="image"><img src="images/craig-stack.jpg" alt="Craig Stack"></p>
    <p>@Craig_Stack</p>
    <p>#eldiablo</p>
  </li>
  <li class="trigger" data-target="6" data-fieldclass="data7">
    <p class="image"><img src="images/cale-pisarra.jpg" alt="Cale Pisarra"></p>
    <p>@calepissarra</p>
    <p>#thedirtyseagull</p>
  </li>
  <li class="trigger" data-target="7" data-fieldclass="data8">
    <p class="image"><img src="images/mr-cpt.jpg" alt="Mr Cape Town"></p>
    <p>@MrCPT</p>
    <p>#goodoak</p>
  </li>
  <li class="trigger" data-target="8" data-fieldclass="data9">
    <p class="image"><img src="images/life-is-savage.jpg" alt="Life Is Savage"></p>
    <p>@LifeisSavage</p>
    <p>#whoyourdaddy</p>
  </li>
  <li class="trigger" data-target="9" data-fieldclass="data10">
    <p class="image"><img src="images/brent-graham.jpg" alt="Brent Graham"></p>
    <p>@BrentGraham</p>
    <p>#thefalcon</p>
  </li>
</ul>

Answer 1

您可以使用此方法

function NextClick()
{
    var li = $('ul.thumbnails li.active');
    var index = $("ul.thumbnails li").index(li);

    $("ul.thumbnails li").eq(index + 1).click();
}

function PrevClick()
{
    var li = $('ul.thumbnails li.active');
    var index = $("ul.thumbnails li").index(li);

    if(index > 0)
      $("ul.thumbnails li").eq(index - 1).click();
}

请参阅JsFiddle中的工作示例.