URLのフラグメントとリンクのフラグメントをjqueryで照合しますか？

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'}); 
} 

、この場合には、リンク3のコンテナ要素が強調表示されます。

Answer 1

エレガント最短ソリューション

Live Demo

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

もうあまりエレガントなオプションが、期待どおりコードが機能しなかった理由の一例。 Live Demo 2

.eachを使用しないあなただけの最初のリンクのためのhrefを取得しますので、他に一致することはできません。だから基本的には、私はあなたのロジックをそれぞれにラップして、あなたのセレクターを少し変更してdiv背景を赤に変えました。しかし、私はオプション1をお勧めします。私たちのフラグメントと一致するとCSSを適用しないリンクアウト

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

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');