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 の背景を赤にしました。ただし、オプション 1 をお勧めします。

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

2つの提案。

まず、それほどループする必要はないかもしれません。Attribute Ends With Selectorを見てください。それはあなたのために検索を達成できるかもしれません。

一致したら、次のようなことができるはずです。

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