使用 jquery 将链接片段与 url 片段进行匹配？

Question

如何在链接片段中找到与 url 片段的匹配项，然后突出显示该链接的父链接？

HTML、

<div class="item">
    <a href="http://example.come/#/story/article-1/">Link 1</a>
</div>

<div class="item">
    <a href="http://example.come/#/story/article-2/">Link 2</a>
</div>

<div class="item">
    <a href="http://example.come/#/story/article-3/">Link 3</a>
</div>

<div class="item">
    <a href="http://example.come/#/story/article-4/">Link 4</a>
</div>

jquery，

//var fragment = location.hash;
fragment = '#/story/article-3/';

string = $('.item').find('a').attr('href');
array_string = string.split('#');

last_item = array_string[array_string.length - 1];
if(fragment == '#'+last_item) 
{
   alert('match!');

   // this is my theory... but I don't know how to get the object that matches the fragment.
   match_object.parents().css({background:'red'});
}

因此，在本例中，Link 3 的容器元素应突出显示。

Answer 1

优雅的最短解决方案

现场演示

fragment = '#/story/article-3/';
$('.item a[href$="' + fragment + '"]').parent().css({background:'red'});

另一个不太优雅的选择，但一个例子说明了为什么你的代码没有按预期工作。

现场演示 2

如果不使用 .each 你只会获取第一个链接的 href，因此它永远不会与另一个链接匹配。所以基本上我只是把你的逻辑包裹起来，并稍微修改你的选择器以将 div 背景变成红色。不过我推荐选项一。

//var fragment = location.hash;
fragment = '#/story/article-3/';

$('.item').find('a').each(
    function(){
        array_string = $(this).attr('href').split('#');

        last_item = array_string[array_string.length - 1];

        if(fragment == '#'+last_item) 
        {
           alert('match!');

           $(this).css({background:'red'});
        }
    }
);

Answer 2

只需过滤掉与我们的片段不匹配的链接并应用CSS。

演示

var fragment = '#/story/article-3/';
$('div.item').find('a').filter(function(i) {
    return $(this).attr('href').indexOf(fragment) > -1
}).parent('div').css({background:'red'});

Answer 3

两个建议。

首先，您可能不需要所有循环。看一下属性以选择器结尾。这也许能够为您完成搜索。

一旦你匹配了，那么你应该能够做这样的事情：

$(this).parent().css('background-color', 'red');