jquery循环遍历锚点以匹配悬停锚点类并应用css

jquery loop through anchors to match class of hovered anchor and apply css

本文关键字：css 悬停 应用 循环 遍历 jquery      更新时间：2023-09-26

请考虑以下HTML:

<div class="week start-available start-mid end-available end-mid overlap-False">

                <a href="http://alink.com" class="20130906-20130912">
                    <span class="wk-start" style="">    
                            <span class="day overlap-False">9 </span>

                            <span class="day overlap-False">10 </span>

                            <span class="day overlap-False">11 </span>

                            <span class="day overlap-False">12 </span>
                    </span>
                </a>

                <a href="http://alink.com" class="20130913-20130919">
                    <span class="wk-end">
                            <span class="day overlap-False">13 </span>

                            <span class="day overlap-False">14 </span>

                            <span class="day overlap-False">15 </span>
                    </span> 
                </a> 

            </div>
<div class="week start-available start-mid end-available end-mid overlap-False">

                <a href="http://alink.com" class="20130913-20130919">
                    <span class="wk-start" style="">    
                            <span class="day overlap-False">16 </span>

                            <span class="day overlap-False">17 </span>

                            <span class="day overlap-False">18 </span>

                            <span class="day overlap-False">19 </span>
                    </span>
                </a>

                <a href="http://alink.com" class="20130920-20130926">
                    <span class="wk-end">
                            <span class="day overlap-False">20 </span>

                            <span class="day overlap-False">21 </span>

                            <span class="day overlap-False">22 </span>
                    </span> 
                </a> 

            </div>

我想使用jquery将css应用于当前悬停在同一类锚点上的锚点。每个锚点都有另一个具有相同类但属于不同父级的锚点。

我假设我需要循环遍历所有元素，以匹配悬停的元素的类，但必须承认我有点迷失了方向。如有任何帮助，我们将不胜感激。

尝试

var $as = $('.week > a').hover(function(){
    $as.not(this).filter('.' + this.className).addClass('test')
}, function(){
    $as.not(this).filter('.' + this.className).removeClass('test')
})

演示：Fiddle

相关文章：