Question

如何在链接的片段中找到与网址片段匹配的内容，然后突出显示该链接的父级？

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

优雅的最短解决方案

<强> Live Demo

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

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

<强> Live Demo 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

只需filter输出与我们的片段不匹配的链接并应用css。

DEMO

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

两个建议。

首先，您可能不需要所有循环。看看Attribute Ends With Selector。这可能能够完成对你的搜索。

一旦你有了比赛，那么你应该能够做到这样的事情：

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

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

3 个答案: