How to get through other parents using jQuery?

Question

I have many forms on a website, and I would like to use jQuery for lateral transfer so that when I click PgUp / PgDn it will go to the next <textarea> field. I worked when <textarea> were brothers and sisters, but if they are in a separate form (with different parents), I cannot understand this.

HTML looks like this:

 <form action="#" method="post"> <textarea id="numOne" name="numOne" class="num" ></textarea> </form> <form action="#" method="post"> <textarea id="numtwo" name="numtwo" class="num" ></textarea> </form> <form action="#" method="post"> <textarea id="numthree" name="numthree" class="num" ></textarea> </form> 

This worked when they were brothers and sisters:

 $('.num').keydown(function (e) { if (e.which == 34) { $(this).next().focus(); e.preventDefault(); return false; } if (e.which == 33) { $(this).prev().focus(); e.preventDefault(); return false; } }); 

Answer 1

Live demo

 $('.num').keydown(function (e) { if (e.which == 34) { $(this).closest('form').next('form').find('.num').focus(); return false; } if (e.which == 33) { $(this).closest('form').prev('form').find('.num').focus(); return false; } }); 

_{As you can see, I used .closest('form') , this will allow you to use textarea once inside the fieldset without worrying about jQuery, because it will always cross the DOM in the right way.}

Another nice way: DEMO

 $('.num').keydown(function (e) { var k = e.which; if ( k==34 || k==33 ){ $(this).closest('form')[k==34?'next':'prev']('form').find('.num').focus(); e.preventDefault(); } }); 

Another nice demo

 var $num = $('.num').keydown(function(e) { var k=e.which, c=$num.index(this); if(k==34||k==33) $num[k==34?++c:--c].focus(); }); 

_{Skip the last one:}

 var $num = $('.num') // Create a jQuery Array collection // of all the .num in the DOM. .keydown(function(e) { // On keydown pass the (e)vent. var k=e.which, // Var k is now the "which keyCode" c=$num.index(this); // Var c will be the index of the clicked // element taken from the collection. if(k==34||k==33) // Only IF pgUp/pgDn $num[k==34?++c:--c] // increment or decrement c and get that el. // out of the array ( eg: $num[1] ) .focus(); // and set focus to it. }); 

Answer 2

You must use a collection of elements to get the next and previous elements, so the DOM structure does not matter, and you can insert elements in any way:

 var elems = $('.num'); elems.on('keydown', function (e) { var n = e.which === 34 ? 1 : e.which === 33 ? -1 : 0, next = elems.eq(elems.index(this) + (n)); if (n) { e.preventDefault(); next.length ? next.focus() : elems.first().focus(); } }); 

Fiddle

Answer 3

You can use .index and .eq to do next / previous selector searches. In this case, we look at all the text fields on the page and find out which one we are now finding, say, the 22nd text area. Then we either select the 21st or 23rd text area, and focus it.

It is more reliable than other solutions that rely on the DOM structure. It just depends on the order of the DOM. You can further refine it by changing $('textarea') to $('#scope textarea') , where scope is the highest parent for which you want to look inside.

If your HTML changes (new or deleted textarea s) then don’t cache the result like me. However, this improves performance if your HTML does not change in this area.

 var $textareas = $('textarea'); $('.num').keydown(function (e) { if (e.which == 34) { var index = $textareas.index(this) $textareas.eq(index + 1).focus(); e.preventDefault(); return false; } if (e.which == 33) { var index = $textareas.index(this) $textareas.eq(index - 1).focus(); e.preventDefault(); return false; } }); 

fiddle