Joshua Joshua - 1 year ago 64
Javascript Question

Targeting Multiple tabs with a single key up function call

I am trying to build a DRY JQuery call that allows me to target several tabs within a form structure.


$(".subTabAction").keyup(function (event) {
if (event.keyCode == 13) {


<span class="sr-only" id="anchor" tabindex="0">Main Content</span>
<span id="UniqueId1" tabindex="0" class="subTabAction">Details</span>
<span id="UniqueId2" tabindex="0" class="subTabAction">Duration</span>
<span id="UniqueId3" tabindex="0" class="subTabAction"></span>
@if (Model.blah.Count > 1)
<span id="blah" tabindex="0" class="subTabAction"></span>
@*<span class="sr-only" id="anchor" tabindex="0">Main Content</span>*@

Each of the tabs has a unique id, and triggers an ajax call, the problem is I can only target one this way. I would like to be able to target each one separately so that they can be accessed with keyboard only.

Answer Source

$(".subTabAction") is a collection of multiple tabs because there are more elements with this class name. $(this) will give you the tab you targeted.

$(".subTabAction").keyup(function (event) {
    if (event.keyCode == 13) {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download