Question

I’m trying to re-assign a new tab-index on a given form. To do this I want to exclude any form elements that are invisible (not visible) — and also exclude any form elements that possess a specific class (“.offscreen”).

I’m trying this method — but, it’s not working (and is perhaps not the most efficient method).

function reassignTabOrders() {
    var tabindex = 1;
    $j('input,select,textarea').not('.offscreen').each(function() {
        var $input = $j(this);
        if ($input.is(':visible')) {
            $input.attr("tabindex", tabindex);
            tabindex++;
        }
    });
};

Any ideas?

Answer 1

You can use the :visible selector and :input, like this:

function reassignTabOrders() {
  $j(':input:visible:not(.offscreen)').each(function(i) {
     this.tabIndex = i+1;
  });
}

This also uses the index provided by the .each() function to the callback, no need to maintain a separate variable yourself 🙂 In later jQuery versions you can shorten it down (but not quite as fast) using a function with .attr(), like this:

function reassignTabOrders() {
  $j(':input:visible:not(.offscreen)').attr("tabindex", function(i) {
    return i+1;
  });
}