Сопоставление фрагмента ссылки с фрагментом URL с помощью jquery? - PullRequest
Новая
       10

Сопоставление фрагмента ссылки с фрагментом URL с помощью jquery?

0 голосов
/ 13 сентября 2011

Как найти совпадение во фрагменте ссылки с фрагментом 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 должен быть выделен.

Ответы [ 3 ]

3 голосов
/ 13 сентября 2011

Элегантное самое короткое решение

Демонстрация в реальном времени 

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'});
        }
    }
);
1 голос
/ 13 сентября 2011

Просто Отфильтруйте ссылки, которые не соответствуют нашему фрагменту и применяют 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'});
0 голосов
/ 13 сентября 2011

Два предложения.

Во-первых, вам может не понадобиться весь этот цикл. Посмотрите на Концы атрибутов с селектором . Это может быть в состоянии выполнить поиск для вас.

Как только у вас будет матч, вы сможете сделать что-то вроде этого: 

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