How can I loop through a set of IDs and match the active element's attribute of another set of elements in jQuery?

Question

I'm trying to loop through a set of element's IDs and match it against another set of element's attribute (aria-labelledby) but only if it is the active panel and I cannot find a solution to it.

 $('body a').mouseenter(function() { e = $(this); btnClass = e.attr('class'); switch (btnClass) { case 'nav-link': tabID = $(this).attr('id'); paneID = $('#v-pills-tabContent').children(); paneID.each(function(index) { console.log(index + ": " + $(this).prop('id')); }); break } }); 

 .nav-link { display: block; text-decoration: none !important; padding: 14px; border-bottom: 1px solid #eff1f2; color: #747474; } #v-pills-tab a:last-child { border-bottom: 0; } .tab-content > .active { opacity: 1; } .col-3,.col-9 { float: left; } .col-9 { width: 250px; } .col-3 { border: 1px solid #eff1f2; } #v-pills-tabContent p { margin-bottom: 18px; } .day-num,.day-name,.month-name,.year-name { display: block; text-align: center; } .day-num,.month-name,.schedule-header { font-size: 28px; } .day-name,.year-name { font-size: 14px; } .schedule-header { display: block; text-align: center; line-height: 3.2em; } .radio-link { padding: 10px 20px; position: relative; } .schedule-radio { width: 18px; height: 18px; background: #fff; border: 2px solid #eff1f2; border-radius: 50%; display: inline-block; border-radius: 25px; margin: 0 10px 0 0; position: absolute; left: -6px; top: 8px; } .tab-content .no-top-margin { margin-top: 0 !important; } .tab-content > .tab-pane { margin-top: 22px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <div class="col-3"> <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist"> <div class="nav-link" role="tab" aria-expanded="true"><span class="month-name">Oct</span><span class="year-name">2017</span></div> <a class="nav-link" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-expanded="true"> <span class="day-num">9</span> <span class="day-name">Thursday</span> </a> <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-expanded="true"> <span class="day-num">10</span> <span class="day-name">Friday</span> </a> <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-expanded="true"> <span class="day-num">11</span> <span class="day-name">Saturday</span> </a> <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-expanded="true"> <span class="day-num">12</span> <span class="day-name">Sunday</span> </a> </div> </div> <div class="col-9"> <div class="tab-pane no-top-margin" id="v-pills-currentdate" role="tabpanel" aria-labelledby="v-pills-currentdate-tab"> <p style="margin-bottom:0;" class="no-top-margin"><span class="schedule-header">Schedule</span></p> </div> <div class="tab-content" id="v-pills-tabContent"> <div class="tab-pane fade active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab"> <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">4:05pm CST</time></span></a></p> <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">6:25pm CST</time></span></a></p> <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">7:35pm CST</time></span></a></p> <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">8:25pm CST</time></span></a></p> </div> <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab"> <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">5:35pm CST</time></span></a></p> <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">7:25pm CST</time></span></a></p> <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">8:15pm CST</time></span></a></p> <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">9:45pm CST</time></span></a></p> </div> <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab"> <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">3:10pm CST</time></span></a></p> <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">4:35pm CST</time></span></a></p> <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">4:55pm CST</time></span></a></p> <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">5:15pm CST</time></span></a></p> </div> <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab"> <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">6:15pm CST</time></span></a></p> <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">7:20pm CST</time></span></a></p> <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">7:30pm CST</time></span></a></p> <p><a href="" class="radio-link" id=""><span class="schedule-radio"></span><span><time datetime="2017-10-13T00:25:00Z">8:25pm CST</time></span></a></p> </div> </div> </div> 

I need to find the active panel and get its attribute (aria-labelledby). The attribute (aria-labelledby) will be used to match an ID from another set of elements. This should be triggered by the jQuery mouseenter event.

For better understanding, I have a live example on JSFiddle

Answer 1

If you want to find the child of #v-pills-tabContent that has the attribute aria-labelledby equal to the id of the clicked a element, this is what you should do:

tabID = $(this).attr('id');
paneID = $('#v-pills-tabContent')
             .children('[aria-labelledby="' + tabID + '"].active')

The selector '[aria-labelledby="' + tabID + '"].active' will match the active elements that have aria-labelledby equal to tabID .

Answer 2

Every active tab should have .active class.
If so, inside the switch statement you can use $('.tab-pane.active').attr('aria-labelledby') to get the aria-labelledby value.