如何遍歷一組ID並匹配jQuery中另一組元素的活動元素屬性？

Question

我試圖遍歷一組元素的ID，並將其與另一組元素的屬性（aria-labelledby）匹配，但前提是它是活動面板且我無法找到解決方案。

 $('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> 

我需要找到活動面板並獲取其屬性（aria-labelledby）。 該屬性（aria-labelledby）將用於匹配另一組元素中的ID。 這應該由jQuery mouseenter事件觸發。

為了更好地理解，我在JSFiddle上有一個實時示例

Answer 1

如果要查找屬性aria-labelledby等於單擊元素的id的#v-pills-tabContent a子級，則應這樣做：

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

選擇器'[aria-labelledby="' + tabID + '"].active'將匹配具有aria-labelledby tabID等於tabID的活動元素。

Answer 2

每個活動選項卡都應具有.active類。
如果是這樣，則可以在switch語句中使用$('.tab-pane.active').attr('aria-labelledby')獲得aria-labelledby值。