Setting tabindex to "last element" and "penultimate element" - possible?

Question

In the accepted answer to this question Multiple submit buttons in an HTML form the comment is raised:

Please don't do this without also changing the tab order, so that hitting the tab button will cycle through the buttons as they appear on screen.

My question is: is there a way to set the tabindex on those two buttons to accomplish this ordering without having to assign a specific tabindex to every other tabable element on the page?

My understanding of tabindex values is that specified positive values proceed elements w/o a specified value, so I am at a loss to figure out a way to do this w/o going through and assigning everything else a value.

If indeed, assigning a specific tabindex to every item is the only way, is there some (hopefully short and hopefully jQuery) magic to assign every appropriate element on the page a tabindex of, say, 1?

EDIT
As it looks like the solution is going to involve applying a specific tabindex to every other tabable object -- it seems like an important part of the solution is going to be: is there a convenient way in jQuery to select every tabable object? All s s s and ???

Answer 1

According to the specification:

• positiv values assigned to tabindex orders the elements according to their tabindex values

• negative values make elements "unfocusable"

• a value of 0 makes the element focusable but its order dependents on the platform

mdn-html specification of tabindex

So if you want to have a specific order in your page you have to assign a value to each element.

But here comes jquery: Say the elements which should be in order are in a div with id="myDiv" You can then do:

$("#myDiv").find("*").prop("tabindex", 1);

This would make every child/subchild element of myDiv have a tabindex of 1. Then your two buttons could have a css class assigned (e.g: class="highTabIndex").

Then you can call jquery again:

var idx = 2;
$("#myDiv").find(".highTabIndex").each(function(idx, element) {
    element.prop("tabindex", idx++);
});

and your buttons with class highTabIndexwould be orderd according to "position" in the page.