jQuery:查找与当前 URL 最匹配的链接
我有以下代码,尝试将选定的类添加到与网址匹配的链接中:
var pathname = window.location.pathname;
$(document).ready(function ()
{
$('ul#ui-ajax-tabs li a').each(function()
{
if (pathname.indexOf($(this).attr('href')) == 0)
{
$(this).parents('li').addClass('selected');
}
});
});
1.)例如,如果我有一个像 /Organizations/Journal
和 /Organizations 这样的网址/Journal/Edit
与组织和期刊的链接将显示为已选中。这很好!
2.) 但是有时我的网址如下:/Organizations
和 /Organizations/Archived
,如果我有指向已存档的链接,则两者都会被选中BUT< /strong> 我不希望发生这种情况,因为类似的组织没有网址的第二部分,因此不应该匹配。
任何人都可以帮助使其适用于第二种类型而不破坏第一种类型吗?此外,这些都不能是硬编码的正则表达式来查找关键字,因为网址有很多不同的参数!
干杯
示例:
如果网址是 /Organizations/
或 /Organizations
,则应选择带有 /Organizations
的链接。如果 URL 为 /Organizations/Journal/New
,则将选择包含 /Organizations/Journal
或 /Organizations/Journal/New
的链接。
但是,如果我有一个带有 /Organizations/Recent
的网址,并且有两个链接:/Organizations
和 /Organizations/Recent
那么只有第二个应该是已选中!因此,这里需要注意的是,它必须有第三个参数,然后才能更松散地而不是精确匹配地查找 URL 的位。
请记住,它可能并不总是组织,因此不能将其硬编码到 JS 中!
I have the following code which tries to add a class of selected to a link that matches the url:
var pathname = window.location.pathname;
$(document).ready(function ()
{
$('ul#ui-ajax-tabs li a').each(function()
{
if (pathname.indexOf($(this).attr('href')) == 0)
{
$(this).parents('li').addClass('selected');
}
});
});
1.) So for example if I have a url like /Organisations/Journal
and /Organisations/Journal/Edit
a link with Organisations and Journal will show as being selected. This is fine!
2.) However sometimes I have urls like: /Organisations
and /Organisations/Archived
and if I have a link to the Archived then both will be selected BUT I don't want this to happen because the Organisations like doesn't have the second part of the url so shouldn't match.
Can anyone help with getting this working for the second types Without breaking the first type? Also none of this can be hardcoded regex looking for keywords as the urls have lots of different parameters!
Cheers
EXAMPLES:
If the url is /Organisations/
Or /Organisations
then a link with /Organisations
should be selected. If the URL is /Organisations/Journal/New
then a link with /Organisations/Journal
or /Organisations/Journal/New
would be selected.
BUT if I have a url with /Organisations/Recent
and have two links: /Organisations
and /Organisations/Recent
then only the second should be selected! So the thing to note here is that it must have a third parameter before it should look for bits of the URL more loosly rather than an exact match.
Remember it might not always be Organisations so it can't be hardcoded into the JS!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
编辑:我以前的解决方案非常复杂。更新了答案和fiddle。
最佳匹配的计算方式如下:
假设我们的路径名是“/foo/bar/baz/x”。
我们有两个有问题的链接:
这就是发生的情况:
/foo/bar/baz/x (第一个链接的 url 从路径名 < 中删除) code>pathname.replace($(this).attr('href'), ''))长度
)为 5。这是我们对该链接的“惩罚”。if (overlap_penalty < best_distance)
)。 5 低于(=更好)于 999。this
(即DOM 对象)以供稍后使用使用。
/foo/bar/baz/x(第二个链接的 url 从路径名中删除)this
(即DOM 对象)以供以后使用。
最后,我们只是检查是否找到任何匹配的链接,如果是,则将
addClass('selected')
应用于其最接近的父级。
Edit: My previous solution was quite over-complicated. Updated answer and fiddle.
The best match is calculated like so:
Assume our pathname is "/foo/bar/baz/x".
We have two links in question:
This is what happens:
/foo/bar/baz/x (the first link's url is deleted from the path namepathname.replace($(this).attr('href'), '')
)length
) of this remainder is 5. this is our "penalty" for the link.if (overlap_penalty < best_distance)
). 5 is lower (=better) than 999.this
(being the<a href="/foo/bar/">
DOM object) for possible later use./foo/bar/baz/x (the second link's url is deleted from the path name)this
(being the<a href="/foo/bar/baz">
DOM object) for possible later use.In the end, we just check if we found any matching link and, if so, apply
addClass('selected')
to its closest<li>
parent.你为什么不使用
而不是
Why dont u use
instead of