如何遍历一组ID并匹配jQuery中另一组元素的活动元素属性？

时间：2017-10-11 20:40:55

标签： javascript jquery html

我试图遍历一组元素的ID并将其与另一组元素的属性（aria-labelledby）匹配，但只有当它是活动面板且我不能找到解决方案。

＆＃13;
＆＃13; 
$('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
    }
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我需要找到活动面板并获取其属性（aria-labelledby）。 属性（aria-labelledby）将用于匹配另一组元素的ID。 这应该由jQuery mouseenter事件触发。

为了更好地理解，我在JSFiddle

上有一个实例

2 个答案:

答案 0 :(得分：1)

如果您想找到属性#v-pills-tabContent等于点击的aria-labelledby元素的id的{​​{1}}的孩子，那么您应该这样做： 

a

选择器tabID = $(this).attr('id'); paneID = $('#v-pills-tabContent') .children('[aria-labelledby="' + tabID + '"].active') 将匹配'[aria-labelledby="' + tabID + '"].active'等于aria-labelledby的有效元素。

答案 1 :(得分：0)

每个有效标签应该有public async Task Any(MyRequest request) { foreach (var chunk in Chunks) await base.Response.OutputStream.WriteAsync(chunk, 0, chunk.Length); } 类 如果是，请在IStreamWriterAsync语句中使用IStreamWriter获取public class StreamChunksResponse : IStreamWriterAsync { public IEnumerable<byte[]>> Chunks { get; set; } public async Task WriteToAsync( Stream responseStream, CancellationToken token = default(CancellationToken)) { foreach (var chunk in Chunks) await responseStream.WriteAsync(chunk, 0, chunk.Length); } } 值。

相关问题
最新问题