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

Question

我是一个有用的助手，可以为您翻译文本。

我陷入了一些看似可能但是我已经两天没能弄清楚的事情中！

我在我的.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>

- Chris

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 中查看实例。

- Chuck Norris

---

要在 Jsfiddle 上进行测试，只需单击红色区域，使答案区域处于活动状态。之后您就可以使用键盘了。 - Chuck Norris

Answer 2

怎么样：

Mousetrap.bind('right', function() {
    if ($('li.active').is(':last-child'))
        obj = $('li.active').parents('ul').next('ul').find('li').first();
    else obj = $('li.active').next();
    obj.click();
});

- casraf

---

谢谢陈，但它似乎没有跳到下一个列表？仍然停留在最后一项？参考：http://www.vadev.co.za/bts/new/parade-ring.html - Chris

Answer 3

Mousetrap.bind('right', function() { if($('li.active').next().hasClass("trigger"))$('li.active').next().click();
else $('li.active').closest(".item").next().find(".trigger").first().click()

});
Mousetrap.bind('left', function() { if($('li.active').prev().hasClass("trigger"))$('li.active').prev().click();
else $('li.active').closest(".item").prev().find(".trigger").last().click()

});

演示

你也可以尝试Chuck Norris代码

- bugwheels94

---

如果你从1到10，然后再试着去一次，它会回到6。我该如何让它重新回到开头？ - Chris

@ChrisEdington 试试这个已经编辑过的，不用担心我会离开让你处于中途。 - bugwheels94

@Ankit，从第二个ul的第一项返回时，这仍然存在问题。使用我的答案代替此答案，它可以做到同样的效果，代码更少且没有问题。 - Chuck Norris

谢谢你们两位。@ChuckNorris 当我实现你的代码时，它无法超过第6个数字？ - Chris

不，它是从1到10并且也会倒序。 - Chuck Norris

@ChrisEdington 这里有个聊天室 http://chat.stackoverflow.com/rooms/32357/room-for-ankit-and-chris-horris-edington - bugwheels94

Answer 4

您可以将"data-target"属性作为参考。

您的标记可能还缺少结尾。

Mousetrap.bind('right', function() {
  new_active_li = $('ul li[data-target^="' + (parseInt($('ul li.active').attr('data-target')) + 1) +'"]');
  $('ul li').removeClass('active');
  new_active_li.addClass('active');
  new_active_li.click();
});
Mousetrap.bind('left', function() {
  new_active_li = $('ul li[data-target^="' + (parseInt($('ul li.active').attr('data-target')) - 1) +'"]');
  $('ul li').removeClass('active');
  new_active_li.addClass('active');
  new_active_li.click();
});

- bubjavier

Answer 5

只需要一个简单的测试就可以像这样解决问题

var test = $("ul li.last").next().html();
if(test == 'undefined'){
    // jump to next list
    var nextList = $("li.active").parent().parent().next().find("ul");
}else{
    // the normal code
}

- Sajjad Ashraf