jquery - 元素如何匹配？

Question

我有以下 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 切割成需要的匹配位。

$(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


});

我想做的事:

• 在 ma​​in-menu > li > a 中查找与 var = MainMenu 匹配的内容，并使用 addClass('active') 匹配“a”
• 在 子菜单 > li > a 中查找与 var = SubMenu 匹配的内容，并使用 addClass('active') 匹配“a”

那么如何运行这些菜单来查找与这些变量的匹配项？

<强> http://jsfiddle.net/MrTest/gWDm8/124/

Answer 1

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

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

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