どのように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イベントによってトリガーされる必要があります。

はより良く理解するために、私は .activeクラスを持っている必要があり JSFiddle

Answer 1

クリックしたa要素のidに等しい属性aria-labelledbyを持って#v-pills-tabContentの子を検索したい場合は、これはあなたが何をすべきかです：

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

セレクタ'[aria-labelledby="' + tabID + '"].active'は、アクティブな要素にマッチしますaria-labelledbyはtabIDに等しい。

Answer 2

すべてのアクティブなタブ上の実際の例を持っています。
もしそうなら、switchステートメント内で$('.tab-pane.active').attr('aria-labelledby')を使用してaria-labelledbyの値を取得することができます。