1

我正在构建一个小型灯箱插件（只是为了好玩），如果用户按下一个键，它应该打开（模拟点击）具有相同“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>

但是如果图像在不同的父元素中，比如……</p> 

<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() 跳转，但我想构建它完全独立于父元素（因为并不总是有一些）。有没有办法找到独立于任何父元素的下一个元素？有谁知道如何解决这个问题？谢谢！

4

2 回答 2

1

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

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

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

于 2012-10-16T08:53:23.583 回答
0

我有一个类似的问题 - 基本上试图获取集合中的下一个元素，而不管它们出现在 dom 树中的什么位置。最好的解决方案是最初循环这些元素，并给它们一个id，然后可以用来选择下一个元素。

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

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

然后，您可以通过执行类似于此的操作来获得id下一个：.box

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

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

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

$('#box-' + nextId);

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

于 2012-10-16T09:22:44.677 回答