How do I add a tab Index for dynamically created elements using Javascript?

Question

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?

Sotiris · Accepted Answer · 2011-07-14 20:29:29Z

8

Here an example that adds tabindex for all a tags

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

Demo: http://jsfiddle.net/azk2n/1

You can use the same method for hidden elements.

answered Jul 14, 2011 at 20:29

Sotiris

40.2k11 gold badges55 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ArtOfWarfare Over a year ago

+1: great solution. I suggested a small change: index+1 instead of index behaved closer to what I wanted in Safari.

Andrew E Over a year ago

This will not trigger automatically upon new dynamic data showing up in the DOM. This will only add the tabindex attribute to the matching existing DOM elements at the moment this code is executed. You can either re-run this each time something new shows up, or better yet, watch the body and find your elements from there.

Ohhh · Accepted Answer · 2014-01-16 08:13:16Z

5

@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)
});

answered Jan 16, 2014 at 8:13

Ohhh

7066 silver badges9 bronze badges

Collectives™ on Stack Overflow

How do I add a tab Index for dynamically created elements using Javascript?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related