通过 .find() 和 .each() 函数获取 jQuery 当前页面

发布于 2025-01-02 10:37:09 字数 1080 浏览 0 评论 0原文

我正在尝试制作 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);

我收到 [Object] [Object] 警报。有人可以帮忙吗？

提前致谢。

原文

I'm trying to make jQuery menu, which can highlight current page. Method is, add class current on selected.

Here is 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>

And I tried to make something like that:

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

Because CSS code is large and etc, complete codes are at jsFiddle

I think that something isn't properly defined in Jquery part of code. When I try this:

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

I get [Object] [Object] alert. Can someone help?

Thanks in advance.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

只有影子陪我不离不弃 2025-01-09 10:37:09

jQuery 方法始终返回一个 jQuery 对象。如果您想查看其中的内容，请尝试 .length 查看匹配的元素数量，并尝试 [0] 访问各个 DOM 节点。或者甚至更好 - console.log 它，这样您就可以轻松检查其中的所有内容。

您的问题是，location.href 返回整个 URL (http://...)，而您的链接不包含该内容。您可以使用 location.pathname 来获取路径，但突出显示当前页面的真正正确方法是在服务器端执行此操作。没有理由使用 JS 来做这样的事情。

回复收藏 0 原文

吾家有女初长成 2025-01-09 10:37:09

马蒂是真的。但您可以尝试使用 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>

Matti is true. But what you can try is the split() method to get the exact value to match the href.

working example: 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>

回复收藏 0 原文

仅此而已 2025-01-09 10:37:09

//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

//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');

No need for .each

credit - https://stackoverflow.com/a/1302339/3377049

回复收藏 0 原文

~没有更多了~