Question

我正在构建一个小灯箱插件（只是为了好玩），如果用户按下一个键，它应该打开（模拟点击）具有相同“rel”属性的下一个链接。

 .nextAll('.box[rel="'+boxed+'"]').eq(0).click();

上面的代码适用于以下示例：

<a href="/1.jpg" class="box" rel="box-abc123">One</a>
<a href="/2.jpg" class="box" rel="box-abc123">Two</a>
<a href="/3.jpg" class="box" rel="box-abc123">Three</a>

但是如果图像是在不同的父元素中，比如......

<header><a href="/1.jpg" class="box" rel="box-abc123">One</a></header>
<section><a href="/2.jpg" class="box" rel="box-abc123">Two</a></section>
<footer><a href="/3.jpg" class="box" rel="box-abc123">Three</a></footer>

......它不起作用。当然我可以使用parent（）来跳转，但我想完全独立于父元素构建它（因为总是没有一些）。有没有办法找到独立于任何父元素的下一个元素？有人知道如何解决这个问题吗？谢谢！

Answer 1

如果您不想使用父元素，请使用slice获取下一个所有元素

$('a.box[rel="'+boxed+'"]').slice($('a.box[rel="'+boxed+'"]').index(this))

工作小提琴：http://jsfiddle.net/aaWHt/2/

Answer 2

我遇到了类似的问题 - 基本上试图获取集合中的下一个元素，无论它们出现在dom树中的哪个位置。最好的解决方案是最初循环遍历这些元素，然后给它们id，然后可以用它来选择下一个元素。

$boxSelector = $('.box[rel="box-abc123"]');

$boxSelector.each(function(i, v) {
  $(this).prop('id', 'box-' + ++i);
});

然后，您可以通过执行与此类似的操作来获取下一个id的{{1}}：

.box

然后，您可以使用以下选择下一个元素：

var nextId = '';
var boxLength = $boxSelector.length;

$boxSelector.on('click', function() {
  var thisIndex = parseInt(this.id.replace(/[^\d]+/, ''));
  nextId = (thisIndex == boxLength) ? 1 : thisIndex+1;
});

我知道这不会直接回答您的问题，但您应该能够应用相同的原则来达到预期的效果。

jQuery：nextAll独立于父母

2 个答案: