how to set tab order in jquery

I'm using Telerik controls, specifically the numerical textbox where you can set a up-down arrow to increment/decrement values in a textbox. I am required to set the tab order to move to the next field but since there's a button on the up-down arrow, the browser will go through those buttons first then move to the next textbox field.

How do you set the jquery to detect the next visible textbox/dropdown/etc input field and move to that on pressing the tab button inste开发者_如何学JAVAad of running through the buttons near it?

$(function() {
  var tabindex = 1;
  $('input,select').each(function() {
     if (this.type != "hidden") {
       var $input = $(this);
       $input.attr("tabindex", tabindex);
       tabindex++;
     }
  });
});

You actually set this with the HTML attribute tabindex ordered ascending numerically for all inputs on the page. So to skip the buttons, start with the first input on the page assigning it tabindex=1, the second tabindex=2, setting subsequent inputs accordingly. When you get to the buttons that you want to skip simply don't give them a tabindex value, or give them indices at the end of the list.

You can also try this

$('input,select :visible').each(function (i) { $(this).attr('tabindex', i + 1); });

Sometimes when you are generating code or reordering elements with jQuery the solution is not to use taborder but to just make sure you put the elements in the DOM in the correct order. See example below.

JQuery code::
var anchorB = jQuery('#anchorB');
jQuery('#divB').remove();
anchorB.insertBefore( "#anchorC" );


Before::
<a id="anchorB" href="#">Anchor B</a>
<a id="anchorA" href="#">Anchor A</a>
<a id="anchorC" href="#">Anchor C</a>

After::
<a id="anchorA" href="#">Anchor A</a>
<a id="anchorB" href="#">Anchor B</a>
<a id="anchorC" href="#">Anchor C</a>