Текущая страница jQuery через функции .find() и .each()

Я пытаюсь сделать меню jQuery, которое может выделить текущую страницу. Метод заключается в том, чтобы добавить класс current к выбранному.

Вот html:

<div class="menu_items">
<ul class="ul_items" id="navigation">
    <li><a href="index.php">1</a></li>
    <li><a href="index.php?pg=2">2</a></li>
    <li><a href="index.php?pg=3">3</a></li>
    <li><a href="index.php?pg=4">4</a></li>
    <li><a href="index.php?pg=5">5</a></li>             
</ul>
</div>

И я попытался сделать что-то вроде этого:

$(document).ready(function(){
    $("#navigation").find("a[href*='"+window.location.href+"']").each(function(){
            $(this).addClass("current")
    });
});

Поскольку код CSS большой и т. д., полный код находится по адресу jsFiddle.

Я думаю, что что-то неправильно определено в части кода Jquery. Когда я пытаюсь это:

var a = $("#navigation").find("a[href*='"+window.location.href+"']");
alert(a);

Я получаю предупреждение [Объект] [Объект]. Кто-нибудь может помочь?

Заранее спасибо.


menu html jquery current-page
person Filip Krstic    schedule 05.02.2012    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Методы jQuery всегда возвращают объект jQuery. Если вы хотите посмотреть, что в нем содержится, попробуйте .length, чтобы узнать, сколько элементов было сопоставлено, и [0], чтобы получить доступ к отдельным узлам DOM. Или еще лучше - console.log так, чтобы вы могли легко все осмотреть в нем.

Ваша проблема в том, что location.href возвращает весь URL-адрес (http://...), а ваши ссылки его не содержат. Вы можете использовать location.pathname для получения пути, но действительно правильный способ выделить текущую страницу — сделать это на стороне сервера. Нет причин использовать JS для чего-то подобного.

person Matti Virkkunen    schedule 05.02.2012
comment
Большое спасибо. Это помогает. Я сделал это на стороне сервера, но теперь я пытаюсь использовать ту же сторону сервера, если это возможно. Увидит, что я получу. - person Filip Krstic; 05.02.2012

arrow_upward
0
arrow_downward

Матти правда. Но вы можете попробовать метод split(), чтобы получить точное значение, соответствующее href.

рабочий пример: http://jsfiddle.net/ylokesh/AqmHr/2/

<script>
$(document).ready(function() {

    //capture URL
    //var tempURL = window.location.href; 

    var tempURL = "http://www.websiteurl.com/index.php?pg=2"
    var urlMatch = tempURL.split('.com')[1].split('/')[1];
    var hrefVal = $("#navigation a:eq(1)").attr('href');
    $("#navigation").find("a[href='"+hrefVal+"']").html('Current Page');
});
</script>
person Lokesh Yadav    schedule 05.02.2012

arrow_upward
0
arrow_downward 

//var url = 'file://one/two/three/index.php?pg=2'; // use this if testing on desktop
var url = window.location.href;
var filepath = url.lastIndexOf("/") + 1;
var matchThis = url.substr(filepath);
$('#navigation').find("a[href*='"+matchThis+"']").addClass('current');

Не нужно .each

кредит - https://stackoverflow.com/a/1302339/3377049

person Hastig Zusammenstellen    schedule 18.01.2018