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

Question

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

example.com/blog 
example.com/about 

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

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

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

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

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

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

(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

Вы даже не должны разобрать 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); 

Answer 2

Вы можете улучшить свой код как это.

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