Question

I’m building a small lightbox-plugin (just for fun) and if the user presses a key, it should open (simulate click) the next link having the same “rel”-attribute.

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

The code above works for the following example:

<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>

But if the images are in different parent-elements, like…

<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>

…it doesn’t work. Of course I could use parent() to jump, but I want to build it completely independent of parent-elements (as there aren’t some always). Is there a way to find the next element independent of any parent-elements? Does anybody know how to solve this? Thank you!

Answer 1

if you don’t want to use parent element the use slice to get next all elements

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

working fiddle: http://jsfiddle.net/aaWHt/2/