jQuery текущая страница с помощью .find () и .each () - PullRequest
Новая
       35

jQuery текущая страница с помощью .find () и .each ()

1 голос
/ 05 февраля 2012

Я пытаюсь создать меню 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);

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

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

Ответы [ 3 ]

2 голосов
/ 05 февраля 2012

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

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

0 голосов
/ 18 января 2018 
//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

0 голосов
/ 05 февраля 2012

Матти это правда.Но вы можете попробовать метод 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>
...