Используйте JQuery для выбора динамического идентификатора на основе URL

Question

Я немного осмотрел (пару часов сейчас) различные ответы, предоставленные для этого типа сценария, но я не программист, поэтому я застрял в, вероятно, очень простых вопросах. Вот ситуация: у меня есть динамическое меню jquery (основанное на jquery меню лавовых ламп ), которое позиционирует навигационное изображение в зависимости от идентификатора элемента на странице. Этот идентификатор соответствует последней части URL со словами «primary-menu-», вставленными перед URL. Итак, у меня есть:

example.com/blog
example.com/about

Идентификатор для элемента навигации элемента списка для вышеуказанных URL-адресов:

id="primary-menu-blog"
id="primary-menu-about"

(Отрезанный) код Jquery, который я должен выбрать для этих динамических элементов (которые я скопировал из различных ответов на похожие вопросы):

var url = '/';
var id = parseInt(url.split('/')[url.split('/').length - 1]);
var nav = $(this),
currentPageItem = $("#primary-menu-" + id, nav),

Мне удалось заставить это динамическое меню работать на образце страницы , который не имеет динамически меняющихся идентификаторов. Но, естественно, он не работает с новым кодом, потому что я недостаточно знаю об этом. Но я думаю, что я на правильном пути. Предложения приветствуются.

Редактировать: после попытки реализовать предложения в этой теме, но безуспешно, я полагаю, что мне не хватает чего-то простого. Итак, для ясности, вот полный сценарий (это не так долго ...):

(function($) {
  $.fn.spasticNav = function(options) {
    options = $.extend({
      overlap : 0,
      speed : 500,
      reset : 1500,
      color : 'none',
      easing : 'easeOutExpo'
    }, options);

    return this.each(function() {
      # Added by Me, for testing on localhost;
      var url = 'localhost:8000/';
      var id = url.split('/').pop();
      # End Added by Me.
        var nav = $(this),
      currentPageItem = $("#primary-menu-" + id, nav),
      blob,
      reset;
      $('<li id="blob"></li>').css({
        width : currentPageItem.outerWidth(),
        height : currentPageItem.outerHeight() + options.overlap,
        left : currentPageItem.position().left,
        top : currentPageItem.position().top - options.overlap / 2,
        backgroundColor : options.color
      }).appendTo(this);
      blob = $('#blob', nav);
      $('li:not(#blob)', nav).hover(function() {
        // mouse over
        clearTimeout(reset);
        blob.animate(
          {
          left : $(this).position().left,
          width : $(this).width()
        },
        {
          duration : options.speed,
          easing : options.easing,
          queue : false
        }
        );
      }, function() {
        // mouse out    
        reset = setTimeout(function() {
          blob.animate({
            width : currentPageItem.outerWidth(),
            left : currentPageItem.position().left
          }, options.speed)
        }, options.reset);

      });
    }); // end each
  };
})(jQuery);

Answer 1

Вы можете улучшить свой код следующим образом.

var url = 'example.com/blog';
var id = url.split('/').pop();
var nav = $(this),
currentPageItem = $("#primary-menu-" + id, nav);

Answer 2

Вам даже не нужно разбирать URL. Вы можете просто использовать селектор атрибутов, чтобы выбрать любой элемент, идентификатор которого начинается с primary-menu-:

var currentPageItem = $(this).find('[id^="primary-menu-"]');

---

Если вам абсолютно необходимо использовать URL, используйте это:

var id = window.location.href.split('#')[0].split('?')[0].split('/').pop(),
    currentPageItem = $(this).find('#primary-menu-' + url);