如何匹配元素？ [英] How to match element?

问题描述

我有以下html：

<!-- MainMenu -->
<ul class="main-menu">
    <li><a href="About/xxxxx">About</a></li>    
    <li><a href="Services/xxxxx">Services</a></li>
    <li><a href="Portfolio/xxxxx">Portfolio</a></li>
</ul>
<!-- /MainMenu -->


<!-- MainMenu -->
<ul class="sub-menu">
    <li><a href="xxxxx/subpage1.html">About Main</a></li>    
    <li><a href="xxxxx/subpage2.html">About Main</a></li> 
    <li><a href="xxxxx/subpage3.html">About Main</a></li> 
</ul>
<!-- /MainMenu -->

跟随jQuery，它已经将URL切换成匹配位所需的。

And following jQuery, which already cut URL into needed to matching bits.

$(document).ready(function() {

    urlParts = "www.website.com/About/subpage1.html".split("/")
    var MainMenu = urlParts[1]+"/"; // mainmenu e.g About/XXXX
    var SubMenu = urlParts[2];      //submenu e.g XXXX/subpage1.html


    // Find matched to var = MainMenu within main-menu > li > a
    // Find matched to var = SubMenu within sub-menu > li > a


});

我想做什么：

• 查找与主菜单> li> a 中的 var = MainMenu 匹配，并将addClass（'active'）匹配到'a'


• 在子菜单> li> a 和addClass（'active'）匹配'a'

• Find matched to var = MainMenu within main-menu > li > a and addClass('active') to matched 'a'
• Find matched to var = SubMenu within sub-menu > li > a and addClass('active') to matched 'a'

那么如何通过这些菜单查找与那些var的匹配？

http://jsfiddle.net/MrTest/gWDm8/124/

http://jsfiddle.net/MrTest/gWDm8/124/

推荐答案

您可以使用 [name ^ =.. 。] 和 [name $ =...] 选择器匹配以特定字符串开头和结尾的属性：

You can use the [name^="..."] and [name$="..."] selectors to match attributes that start and end with specific strings:

$('.main-menu > li > a[href^="'+MainMenu+'"], .sub-menu > li > a[href$="'+SubMenu+'"]')
.addClass('active');

演示： http://jsfiddle.net/gWDm8/127/

这篇关于如何匹配元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！