jQuery: поиск ссылки, наиболее подходящей для текущего URL - PullRequest
Новая
       0

jQuery: поиск ссылки, наиболее подходящей для текущего URL

1 голос
/ 03 октября 2011

У меня есть следующий код, который пытается добавить класс выбранных к ссылке, которая соответствует URL: 

var pathname = window.location.pathname;

$(document).ready(function ()
{
    $('ul#ui-ajax-tabs li a').each(function()
    {
        if (pathname.indexOf($(this).attr('href')) == 0)
        {
            $(this).parents('li').addClass('selected');
        }
    });
});

1.) Так, например, если у меня есть URL-адрес типа /Organisations/Journal и /Organisations/Journal/Edit, ссылка с организациями и журналами будет отображаться как выбранная. Это хорошо!

2.) Однако иногда у меня есть URL-адреса, такие как: /Organisations и /Organisations/Archived, и если у меня есть ссылка на архив, тогда будут выбраны обе ссылки НО Я не хочу, чтобы это произошло, потому что организации вроде не имеют второй части URL, поэтому не должны совпадать.

Может кто-нибудь помочь с этим работать для вторых типов Без нарушения первого типа? Также ничто из этого не может быть жестко задано регулярным выражением для поиска ключевых слов, так как URL имеют много различных параметров!

Приветствия

Примеры:

Если URL-адрес /Organisations/ или /Organisations, следует выбрать ссылку с /Organisations. Если URL-адрес /Organisations/Journal/New, то будет выбрана ссылка с /Organisations/Journal или /Organisations/Journal/New.

НО, если у меня есть URL с /Organisations/Recent и две ссылки: /Organisations и /Organisations/Recent, тогда должна быть выбрана только вторая! Таким образом, следует отметить, что у него должен быть третий параметр, прежде чем он должен искать биты URL более свободно, чем точное совпадение.

Помните, что это не всегда может быть Организация, поэтому ее нельзя жестко закодировать в JS!

Ответы [ 3 ]

0 голосов
/ 03 октября 2011

Редактировать: Мое предыдущее решение было слишком сложным.Обновленный ответ и скрипка . 

var pathname = window.location.pathname;

$(document).ready(function ()
{
    var best_distance = 999; // var to hold best distance so far
    var best_match = false;  // var to hold best match object

    $('ul#ui-ajax-tabs li a').each(function()
    {
        if (pathname.indexOf($(this).attr('href')) == 0)
        {
            // we know that the link is part of our path name.
            // the next line calculates how many characters the path name is longer than our link
            overlap_penalty = pathname.replace($(this).attr('href'), '').length;
            if (overlap_penalty < best_distance) { // if we found a link that has less difference in length that all previous ones ...
                best_distance = overlap_penalty; // remember the length difference
                best_match = this; // remember the link
            }
        }
    });

    if (best_match !== false)
    {
        $(best_match).closest('li').addClass('selected');
    }
});

Наилучшее совпадение рассчитывается так:

Предположим, что наш путь к файлу "/ foo / bar / baz / x"У нас есть две ссылки:

  • / foo / bar /
  • / foo / bar / baz

Вот что происходит:

  1. / foo / bar / baz / x (URL первой ссылки удаляется из имени пути pathname.replace($(this).attr('href'), ''))
  2. "baz / x" - это то, что остается.
  3. Количество символов (length) этого остатка равно 5. Это наш «штраф» за ссылку.
  4. Мы сравниваем 5 с нашим предыдущим лучшим расстоянием (if (overlap_penalty < best_distance)).5 меньше (= лучше), чем 999.
  5. Мы сохраняем this (являющийся объектом <a href="/foo/bar/"> DOM) для возможного последующего использования.
  6. Вторая ссылка обрабатывается таким же образом:
  7. / foo / bar / baz / x (URL второй ссылки удаляется из имени пути)
  8. "/ x" - это то, что остается.
  9. Количество символов этого остатка равно 2.
  10. Мы сравниваем 2 с нашим предыдущим лучшим расстоянием (будучи 5).2 меньше 5.
  11. Мы сохраняем this (являющийся объектом <a href="/foo/bar/baz"> DOM) для возможного последующего использования.

В конце мы просто проверяем, нашли ли мылюбую соответствующую ссылку и, если это так, примените addClass('selected') к ближайшему <li> родительскому элементу.

0 голосов
/ 24 апреля 2012 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var windowLocationPathname = "/HTMLPage14.htm";  // For testing purpose.

            //Or

            //var windowLocationPathname = window.location.pathname;

            $('ul.ui-ajax-tab').find('a[href^="' + windowLocationPathname + '"]').addClass('currentPage');
        });
    </script>
    <style type="text/css">
        .ui-ajax-tab
        {
            list-style: none;
        }

        a.currentPage
        {
            color: Red;
            background-color: Yellow;
        }
    </style>
</head>
<body>
    <ul class="ui-ajax-tab">
        <li><a href="/HTMLPage14.htm">Test 1 (/HTMLPage14.htm)</a></li>
        <li><a href="/HTMLPage15.htm">Test 2 (/HTMLPage15.htm)</a></li>
        <li><a href="/HTMLPage16.htm">Test 3 (/HTMLPage16.htm)</a></li>
        <li><a href="/HTMLPage17.htm">Test 4 (/HTMLPage17.htm)</a></li>        
    </ul>
</body>
</html>
0 голосов
/ 03 октября 2011

Почему вы не используете 

if($(this).attr('href') == pathname )

вместо 

if (pathname.indexOf($(this).attr('href')) == 0)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...