I need some help in adding a tabindex to all the elements in a <div> dynamically. I need to do this for accessibility. If I specify a <div> element, it should automatically add the tabindex to all elements in that <div>.

I tried some thing like this:

$('#Latest-News-Content [tabindex]').each(function () {
    $(this).attr( 'tabindex', parseInt( $(this).attr('tabindex') ) + 10 )
});

but it doesn't seem to work. Also, how can I add a tab index for elements which are hidden?

For example:

I have a title and description showing in a <div>. The description is hidden and has a jQuery collapser. When I click on the title the description expands. How can I set a tabindex for all the elements?

I need some help in adding a tabindex to all the elements in a <div> dynamically. I need to do this for accessibility. If I specify a <div> element, it should automatically add the tabindex to all elements in that <div>.

I tried some thing like this:

$('#Latest-News-Content [tabindex]').each(function () {
    $(this).attr( 'tabindex', parseInt( $(this).attr('tabindex') ) + 10 )
});

but it doesn't seem to work. Also, how can I add a tab index for elements which are hidden?

For example:

I have a title and description showing in a <div>. The description is hidden and has a jQuery collapser. When I click on the title the description expands. How can I set a tabindex for all the elements?

• javascript
• jquery
• html

2 Answers 2

Here an example that adds tabindex for all a tags

$('#Latest-News-Content a').each(function(index) {
    $(this).attr('tabindex', index)
});

Demo: http://jsfiddle/azk2n/1

You can use the same method for hidden elements.

@Sotiris

This might be an update with newer versions of jQuery. Use .prop() instead of .attr() to set property values.

$('#Latest-News-Content a').each(function(index) {
    $(this).prop('tabindex', index)
});