Using jQuery to get the next or previous element from a selection

Question

How can I get the previous or next element from a jQuery selection?

Basically, I will have a set of elements, say all inputs:

$('input')

When I have a single input, I also need to get the previous and next input. Something like:

$(this).prev('input')
$(this).next('input')

However, the inputs are not siblings and I don't want just the next DOM element. I want the next element in the jQuery selection (inputs in this case).

I know I can iterate through a jQuery selection with

.each(function(...

But I don't need to go over all of the elements, just the one before and after.

The elements will also be dynamically ordered (using jQuery UI sortables).

Answer 1

You could do something like this:

var inp = $('input');

var index = inp.index(this);
var next = inp[index+1];
var prev = inp[index-1];

Note that prev and next, just like this are not jQuery objects but DOM object now. To make them jQuery objects you need to wrap them in the $() function.

Answer 2

jQuery has built in support as required by you,

$($('input')[0]).next('input')

next

 $($('input')[0]).prev('input')

previous