0

如何在链接片段中找到与 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的容器元素。

4

3 回答 3

3

优雅的最短解决方案

现场演示

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'});
        }
    }
);
于 2011-09-13T13:47:53.663 回答
1

只需过滤掉与我们的片段不匹配的链接并应用 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'});
于 2011-09-13T13:50:57.573 回答
0

两个建议。

首先，您可能不需要所有循环。看看Attribute Ends With Selector。那也许可以为您完成搜索。

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

$(this).parent().css('background-color', 'red');
于 2011-09-13T13:53:11.940 回答