Как сопоставить элемент?

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


});

Что я хочу сделать:

• Найти соответствие var = MainMenu в главном меню> li> a и addClass ('active') для совпавшего 'a'
• Найти соответствие var = SubMenu в подменю > li> a и 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/

Answer 2

Использовать селектор атрибута.

item = $('.main-menu > li > a[href="' + MainMenu + '"]');

http://api.jquery.com/attribute-equals-selector/

Answer 3

Простым, но, вероятно, неточным решением является использование псевдоселектора :contains:

$('ul.main-menu').find('li:has(a:contains(' + MainMenu  + '))').addClass('active');

Это добавит класс active к родительскому li node, который содержит anchor, который содержит строку. Точнее точное соответствие:

$('ul.main-menu, ul.sub-menu').find('a').each(function(_, anchor) {
    var $anchor = $(anchor),
        parts = $anchor.attr('href').split(/\//);

    if( parts[0] === MainMenu || parts[1].indexOf(SubMenu) > -1 ) {
        $anchor.addClass('active');
    }
});

http://jsfiddle.net/MKH3Y/

Answer 4

$('.main-menu li a').each(function() {
     if( MainMenu == $(this).attr() ) $(this).addClass('active');
});

Answer 5

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

Answer 6

Вы можете назначить идентификаторы или классы каждому элементу и переходить по одному или использовать .each.

Например:

$("ul > li").each(function(){
... your code ...
}