0
我試圖通過一組元素的ID進行循環，並將其與另一組元素的屬性（aria-labelledby）進行匹配，但只有當它是活動面板時才能找到解決方案。如何循環一組ID並匹配jQuery中另一組元素的活動元素屬性？
$('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
你想找到'＃v-pills-tabContent'的孩子，該孩子的'aria-labelledby'屬性等於點擊'a'元素的'id'嗎？ – ncardeli
@ncardeli是的！這正是我想要完成的。如果你知道如何去做，請在這裏幫助我。 – jQueryster