Correspondance du fragment d'un lien avec le fragment de l'URL avec jquery?

Question

Comment puis-je trouver la correspondance dans le fragment d'un lien avec le fragment de l'URL, puis mettre en surbrillance le parent du lien?

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

Ainsi, dans ce cas, l'élément conteneur du Link 3 devrait être mis en évidence.

Answer 1

solution la plus courte élégante

Live Demo

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

Une autre option moins élégante mais un exemple des raisons pour lesquelles votre code ne fonctionnait pas comme prévu.

Live Demo 2

Sans utiliser .each vous n'obtenir le href pour le premier lien, donc il ne peut jamais correspondre à l'autre. Donc, fondamentalement, j'ai juste pris votre logique enveloppé avec chacun, et modifié votre sélecteur un peu pour activer le fond div. Je recommande l'option un cependant.

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

Juste filter les liens qui ne correspondent pas à notre fragment et appliquent 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

Deux suggestions. D'abord, vous n'avez peut-être pas besoin de tout ce bouclage. Jetez un oeil à la Attribute Ends With Selector. Cela peut être en mesure d'accomplir la recherche pour vous.

Une fois que vous avez le match, alors vous devriez être en mesure de faire quelque chose comme ceci:

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