javascript - jquery循环遍历 anchor 以匹配悬停 anchor 的类并应用css

标签 javascript jquery html css

请考虑以下 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 应用到与当前悬停的 anchor 具有相同类的 anchor 。每个 anchor 都有另一个具有相同类别但属于不同父级的 anchor 。

我假设我需要遍历所有元素以匹配悬停元素的类,但必须承认我有点迷路。任何帮助将不胜感激。

最佳答案

尝试

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

演示:Fiddle

关于javascript - jquery循环遍历 anchor 以匹配悬停 anchor 的类并应用css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18635794/

相关文章:

Jquery UI 一次对多个表行进行排序

html - Windows Phone WebBrowser 控件 HTML 文本颜色

javascript - 代码在 JSFiddle 环境中运行,但在其他环境中运行时不起作用

javascript - 无法在 Internet Explorer 10 中使用 JQuery 更新 Offset

javascript - 一个对象如何在JavaScript中实现Event接口(interface)

javascript - 因为它违反了以下内容安全策略指令 : "style-src ' self'"

jquery - 使用 fadeIn 使 DIV 平滑显示

html - div高度溢出父div

html - 如何在内部没有额外标记的情况下创建顶部和底部填充的可滚动 div?

javascript - 如何使用 Handlebars 让 HTML 使用 JSON 文件中的内容填充自身?